CSS display:flexで縦並びにする方法4選

「パスコン版で横並べにした要素をスマホ版で縦並びにしたい」

「上下中央寄せのためにdisplay:flexを使ったが子要素を縦並びにしたい」

というあなたへCSS display:flexで縦並びにする方法を4種類解説します。

方法1.flex-direction:columnを指定する

flex-directionはflexを指定した要素内の並びの向きを指定するCSSです。display:flexを指定した要素に合わせて指定します。

<style>
.exampleflex{
    display: flex;
    /*コレ*/flex-direction:column;
}
.exampleflex>div{
    padding: 10px;
    margin: 5px;
    background: #41538e;
    color: #FFF;
    font-weight: bold;
    width: 2em;
    text-align: center;
}
</style>
<div class="exampleflex">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

横の位置調整はalign-items

align-itemsは普段は縦の位置調整ですが、flex-directionで要素を縦並べにしているときは横の位置調整となります。

flex-directionは軸の向きが変わるためalign-itemsも向きが変わるのです。

<style>
.exampleflex-align{
    display: flex;
    flex-direction:column;
    /*コレ*/align-items: center;
    height: 300px;
    border: 1px solid #999;
    background: #f2f2f2;
}
.exampleflex-align>div{
    padding: 10px;
    margin: 5px;
    background: #41538e;
    color: #FFF;
    font-weight: bold;
    width: 2em;
    text-align: center;
}
</style>
<div class="exampleflex-align">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

縦の位置調整はjustify-content

justify-contentは普段は横の位置調整ですが、flex-directionで要素を縦並べにしているときは縦の位置調整となります。

flex-directionは軸の向きが変わるためjustify-contentも向きが変わるのです。

<style>
.exampleflex-justify{
    display: flex;
    flex-direction:column;
    /*コレ*/justify-content: center;
    height: 300px;
    border: 1px solid #999;
    background: #f2f2f2;
}
.exampleflex-justify>div{
    padding: 10px;
    margin: 5px;
    background: #41538e;
    color: #FFF;
    font-weight: bold;
    width: 2em;
    text-align: center;
}
</style>
<div class="exampleflex-justify">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

方法2.flex-wrap:wrap かつ子要素width:100%

<style>
.exampleflex2{
    display: flex;
    /*コレ*/flex-wrap:wrap;
}
.exampleflex2>div{
    /*コレ*/width: 100%;
    box-sizing: border-box;
    margin: 5px 0;
    padding: 10px;
    margin: 5px;
    background: #41538e;
    color: #FFF;
    font-weight: bold;
    text-align: center;
}
</style>
<div class="exampleflex2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

flex-wrap:wrapはdisplay:flexの折り返しを許可するCSSです。

初期値はflex-wrap:nowrapであり、折り返しが許可されていません。

flex-wrap:wrapをdisplay:flexを指定した要素に合わせて指定します。

折り返しを許可しただけではまだ横並びのままです。

子要素のwidthを100%にします。これにより折り返しされ縦並びとなります。

※marginやpaddingに合わせてwidthがはみ出ないように調整しましょう。

方法3.divなどで囲む

display:flexによって横並びするのは子要素だけで孫要素には影響ありません。

縦並びしたい要素をdivなどで囲むことでflexの影響を受けないようにできます。

<style>
.exampleflex3{
    display: flex;
}
.exampleflex3>div>div{
    padding: 10px;
    margin: 5px;
    background: #41538e;
    color: #FFF;
    font-weight: bold;
    width: 2em;
    text-align: center;
}
</style>
<div class="exampleflex3">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>

方法4.display:blockにする

display:flexでなくてもいいから縦並べになればいいのであれば、display:flexを指定した要素にdisplay:blockを上書きで指定し、display:flexを解除してしまう方法もあります。

<style>
.exampleflex4{
    display: flex;
    /*コレ*/display: block;
}
.exampleflex4>div{
    padding: 10px;
    margin: 5px;
    background: #41538e;
    color: #FFF;
    font-weight: bold;
    width: 2em;
    text-align: center;
}
</style>
<div class="exampleflex4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

display:flexを解除する方法は下記を参考にしてください。

まとめ

方法1.flex-direction:columnを指定する

display:flexの要素を上から下へ並べるCSSです。

方法2.flex-wrap:wrap かつ子要素width:100%

折り返しできるようにしたうえで折り返しさせる幅にします。

方法3.divなどで囲む

縦並びしたい要素をdivなどで囲み、flexの影響を受けないようにします。

方法4.display:blockにする

display:flexを解除し横並べさせないようにします。

以上、CSS display:flexで縦並びにする方法でした。