flexboxの「column」を使って、上から垂直方向に縦順に並べる方法をご紹介します。
ベースになるHTMLを組みます
CSSを設定する前に基本になるHTMLを組んでいきましょう。
HTMLだけでは表示した時に分かりづらいので、CSSでサイズと色をつけます。
HTML
1 2 3 4 5 |
<div class="container"> <div class="item-1">A</div> <div class="item-2">B</div> <div class="item-3">C</div> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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は上記のまま変わりません。
1 2 3 4 5 |
<div class="container"> <div class="item-1">A</div> <div class="item-2">B</div> <div class="item-3">C</div> </div> |
CSS
上記のCSSに親要素に当たる全体を囲った「class=”container”」を追加し、「display: flex;」を設定する事でflexboxが使用できる用になります。
「flex-direction」を追加する事でどの様に並べるかを設定する事ができます。
垂直方法に上から順に並べる時は「flex-direction: column;」を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.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モジュール)まで掲載しています。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ
予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!