flexboxを使って要素を垂直方向に上から順に縦並びにする方法

flexboxの「column」を使って、上から垂直方向に縦順に並べる方法をご紹介します。

1 ベースになるHTMLを組みます
2 flexboxで「column」を設定する
3 まとめ
4 CSSコーディングのオススメ本

ベースになるHTMLを組みます

CSSを設定する前に基本になるHTMLを組んでいきましょう。
HTMLだけでは表示した時に分かりづらいので、CSSでサイズと色をつけます。

HTML

<div class="container">
　<div class="item-1">A</div>
　<div class="item-2">B</div>
　<div class="item-3">C</div>
</div>

</div>

CSS

.container div{
　width: 200px;
}

.container .item-1{
　background-color: #ff0000;
}

.container .item-2{
　background-color: #2864b3;
}

.container .item-3{
　background-color: #f5f315;
}

.container div{

　width: 200px;

}

.container .item-1{

　background-color: #ff0000;

}

.container .item-2{

　background-color: #2864b3;

}

.container .item-3{

　background-color: #f5f315;

}

ブラウザ確認

Aが赤、Bが青、Cが黄色に縦並びに並んでいます。
divは200pxで指定してますのでA、B、Cそれぞれが200px幅になっています。

flexboxで「column」を設定する

それでは上記で作ったCSSにflexboxを設定していきましょう。

HTML

HTMLは上記のまま変わりません。

<div class="container">
　<div class="item-1">A</div>
　<div class="item-2">B</div>
　<div class="item-3">C</div>
</div>

</div>

CSS

上記のCSSに親要素に当たる全体を囲った「class=”container”」を追加し、「display: flex;」を設定する事でflexboxが使用できる用になります。
「flex-direction」を追加する事でどの様に並べるかを設定する事ができます。
垂直方法に上から順に並べる時は「flex-direction: column;」を追加します。

.container{
　display: flex;
　flex-direction: column;
}

/*↓ここから下は変わりません↓*/
.container div{
　width: 200px;
}

.container .item-1{
　background-color: #ff0000;
}

.container .item-2{
　background-color: #2864b3;
}

.container .item-3{
　background-color: #f5f315;
}

.container{

　display: flex;

　flex-direction: column;

}

/*↓ここから下は変わりません↓*/

.container div{

　width: 200px;

}

.container .item-1{

　background-color: #ff0000;

}

.container .item-2{

　background-color: #2864b3;

}

.container .item-3{

　background-color: #f5f315;

}

ブラウザ確認

・・・
変わりがない・・・様に思えますが「column」を設定する事で上から順に垂直方向に並んでいます。

まとめ

columnを使うだけの設定なら、わざわざ設定しなくても良いかもしれません・・・。

CSSコーディングのオススメ本

CSS辞典第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。