CSS flexの使い方を基礎から解説 プロパティ一覧と実例つき

CSSのflexは、要素を横並びや縦並びに整えたいときに使う基本のレイアウト手法です。div、ul、li、spanのような要素を、余白や配置を保ちながらまとめて扱えるので、ヘッダー、ナビゲーション、カード一覧、フォームの並び替えに向いています。この記事では、display: flex; の基本から、justify-content、align-items、flex-direction、flex-wrap、flex まで、実務でよく使う順に整理して解説します。

CSS flexの基本

Flexboxは、親要素であるコンテナにdisplay: flex;を指定すると、その子要素がフレックスアイテムとして並ぶ仕組みです。レイアウトの基準になるのは、横方向のメイン軸と、縦方向のクロス軸です。まずは「どちらの軸に沿って並べるか」と「どの位置に寄せるか」を分けて考えると、設定ミスが減ります。

古いWebKit系ブラウザ向けにdisplay: -webkit-box;のような指定が使われていた時期もありますが、現在の実務では基本的にdisplay: flex;で問題ありません。まずは標準のFlexboxを正しく使えるようにするほうが重要です。

コンテナとアイテムの関係

Flexboxでは、親要素がコンテナ、子要素がアイテムです。たとえばwrapperの中にdivやliを並べる場合、コンテナ側で方向と配置を決め、アイテム側で伸び方や順番を調整します。役割を分けて考えると、どのプロパティをどちらに書くべきかが見えやすくなります。

まず覚えるコンテナ側のプロパティ

• flex-direction は並ぶ方向を決めます。row、row-reverse、column、column-reverse を使い分けます。
• justify-content はメイン軸方向の位置を決めます。左寄せ、中央、右寄せ、等間隔の配置に使います。
• align-items はクロス軸方向の揃え方を決めます。高さをそろえたいときや、上下中央に置きたいときに便利です。
• flex-wrap は折り返しを制御します。要素数が多い一覧では、wrap を指定すると崩れにくくなります。
• align-content は複数行になったときの行全体の揃え方を決めます。1行しかないときは効きません。
• flex-flow は flex-direction と flex-wrap をまとめて指定する省略形です。

表示例 方向と折り返し

まずは、色を付けた箱が実際にどう並ぶかを見てください。flex-direction と flex-wrap の違いが、ひと目で分かるようにしています。

横並びのレイアウトを作るだけならjustify-contentとalign-itemsで足りますが、折り返しが入る一覧ではflex-wrapとalign-contentまで見る必要があります。1行前提なのか、複数行前提なのかを先に決めると、設定が整理しやすくなります。

表示例 配置と中央寄せ

justify-content と align-items は、見た目の印象を大きく変えます。よく使う配置を色付きの箱で並べると、違いが分かりやすくなります。

アイテム側で使うプロパティ

• order は並び順を変えます。見た目だけを入れ替えたいときに使います。
• flex-grow は余ったスペースの伸び方を決めます。
• flex-shrink は領域が足りないときの縮み方を決めます。
• flex-basis は伸縮の基準になる幅を決めます。
• flex は flex-grow、flex-shrink、flex-basis をまとめて指定する省略形です。
• align-self は特定のアイテムだけ縦位置を変えたいときに使います。

表示例 伸び方と順番

flex の値や order は、見た目の幅と順番を直接変えます。数値の違いがそのまま表示に出るので、実例で確認すると理解しやすくなります。

flex: 1; は便利ですが、何でもこれで済ませると意図しない縮み方をすることがあります。特に、長い文字列を含む要素ではmin-width: 0;を合わせて指定しないと、思ったより縮まずにレイアウトがはみ出すことがあります。flex-basis と width の役割が違う点も押さえておくと、調整が楽になります。

.container {
  display: flex;
  gap: 16px;
}
.item {
  flex: 1;
  min-width: 0;
}

実例で見るCSS flex

ナビゲーションを横並びにする

ヘッダーのナビゲーションは、Flexboxの定番用途です。ulとliを使ったメニューを、中央揃えかつ等間隔で並べられます。要素数が増えても、flex-wrap を組み合わせれば狭い画面でも崩れにくくなります。

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.nav li {
  list-style: none;
}

カードを同じ高さにそろえる

商品一覧や記事一覧では、カードの高さがそろっていないと見た目が不安定になります。ここでの色付きボックスは、画像やサムネイルの代わりになるダミー要素です。カード C は、本文が少し長い比較用のカードとして置いています。Flexboxでは、親要素のalign-items の初期値が stretch なので、子要素はデフォルトでも高さがそろいやすいです。ここではその動きを見せつつ、align-items: flex-start; にすると高さがそろわなくなることも合わせて確認します。

下の例は、同じカードをalign-items: flex-start; で並べたときの見え方です。高さをそろえたいときは、デフォルトの stretch を使うか、明示的に align-items: stretch; を指定します。

.cards {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

フォームのラベルと入力欄を並べる

dt と dd を使う定義リストや、ラベルと入力欄を横並びにしたフォームでもFlexboxは有効です。ラベル幅を固定し、入力欄を可変にすると、読みやすさと操作性の両方を確保しやすくなります。

.form-row {
  display: flex;
  gap: 12px;
}
.form-row .label {
  flex: 0 0 160px;
}
.form-row .field {
  flex: 1;
}

つまずきやすいポイント

• vertical-align はFlexboxでは期待どおりに効きません。縦位置の調整は align-items や align-self を使います。
• height: 100% は、親要素の高さが決まっていないと効きません。Flexboxの問題に見えて、実際は親の高さ不足ということがあります。
• min-width: 0; を入れないと、長い文字列を含むアイテムが縮まずに横はみ出ししやすくなります。
• 1行か複数行か を区別せずにalign-contentを使うと、効かないように見えます。
• WebKitやSafariの癖 が出るケースもあります。まずはFlexboxの基本設定を見直し、それでも崩れるなら別記事のSafari向け対処も確認してください。

関連する個別の補足として、flex-basisとwidthの違いについて や flex-shrinkを用いたレイアウトシフトの防止方法 も参考になります。小さな違いですが、実装結果にははっきり影響します。

FlexboxとGridの使い分け

Flexboxは、1本の軸に沿って要素を並べるのが得意です。一方で、行と列の両方をきっちり管理したいならCSS Gridのほうが向いています。ナビゲーション、ボタン群、カードの横並び、フォームの補助レイアウトはFlexbox、表に近い構造や複雑な2次元レイアウトはGrid、と分けて考えると無駄がありません。

迷ったときは、「横か縦のどちらか一方向を整えるだけならFlexbox」「列と行を同時に設計したいならGrid」と判断すると、選択を外しにくくなります。

まとめ

CSSのflexは、display: flex; を起点に、flex-direction、justify-content、align-items、flex-wrap を押さえるだけでもかなり実用的に使えます。さらに、order、flex-grow、flex-shrink、flex-basis、align-self まで理解すると、実案件での調整力が上がります。まずはコンテナ側とアイテム側の役割を分けて考え、必要に応じてmin-width: 0; や flex-flow も組み合わせて使うのが確実です。