CSS Flexboxチートシート

入門 | 10分 で読める | 2025.01.10

公式ドキュメント
CSS

このチートシートで確認できること

Flexbox は、要素を横方向または縦方向に並べ、余白や揃え方を調整するためのCSSレイアウト機能です。このページでは、コンテナ側のプロパティ、アイテム側のプロパティ、よく使うレイアウトパターンを確認できます。

最初に覚えるのは、display: flex、justify-content、align-items、gap、flex: 1 です。特に、主軸と交差軸の違いを理解すると、中央揃えやサイドバー構成で迷いにくくなります。

基本構造

<div class="container">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
</div>

.container {
 display: flex;
}

コンテナのプロパティ

flex-direction（主軸の方向）

値説明
row左→右（デフォルト）
row-reverse右→左
column上→下
column-reverse下→上

flex-wrap（折り返し）

値説明
nowrap折り返さない（デフォルト）
wrap折り返す
wrap-reverse逆方向に折り返す

ポイント: justify-contentは主軸方向、align-itemsは交差軸方向の配置。この2つの違いを理解することがFlexbox攻略の鍵です。

justify-content（主軸の配置）

値説明
flex-start開始位置（デフォルト）
flex-end終了位置
center中央
space-between両端揃え
space-around均等配置（両端に半分の余白）
space-evenly均等配置（均等な余白）

align-items（交差軸の配置）

値説明
stretch伸縮（デフォルト）
flex-start開始位置
flex-end終了位置
center中央
baselineベースライン揃え

align-content（複数行の配置）

値説明
flex-start開始位置
flex-end終了位置
center中央
space-between両端揃え
space-around均等配置
stretch伸縮（デフォルト）

gap（アイテム間の余白）

プロパティ説明
gap: 20px行と列の余白
row-gap: 20px行の余白
column-gap: 10px列の余白
gap: 20px 10pxrow column

アイテムのプロパティ

実践メモ: gapプロパティを使えばmarginハックは不要。アイテム間の余白を簡潔に指定できます。

flex（flex-grow, flex-shrink, flex-basis）

.item {
 flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
 flex: 1 1 auto; /* grow shrink basis */
 flex: 0 0 200px; /* 固定幅 */
}

/* 個別指定 */
.item {
 flex-grow: 1; /* 余白を埋める比率 */
 flex-shrink: 0; /* 縮小しない */
 flex-basis: 200px; /* 基本サイズ */
}

align-self（個別の交差軸配置）

値説明
auto親のalign-itemsに従う
flex-start開始位置
flex-end終了位置
center中央
baselineベースライン揃え
stretch伸縮

order（並び順）

値説明
order: 0デフォルト
order: -1先頭に移動
order: 1後ろに移動

注意: flex: 1はflex: 1 1 0%の省略形です。flex-basisが0%になるため、コンテンツ幅を考慮したい場合はflex: 1 1 autoを使いましょう。

よく使うパターン

中央揃え

/* 完全中央 */
.container {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

ナビゲーション

/* 左右に分ける */
.nav {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

/* 右寄せ */
.nav {
 display: flex;
 justify-content: flex-end;
 gap: 20px;
}

カードグリッド

.cards {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
}

.card {
 flex: 1 1 300px; /* 最小300px、余白を均等に分配 */
}

サイドバーレイアウト

.layout {
 display: flex;
}

.sidebar {
 flex: 0 0 250px; /* 固定幅 */
}

.main {
 flex: 1; /* 残りを全て使う */
}

ポイント: flex: 0 0 Npxで固定幅、flex: 1で可変幅を作れます。サイドバー+メインのレイアウトはこの組み合わせが定番です。

フッターを下に固定

body {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}

main {
 flex: 1;
}

footer {
 flex-shrink: 0;
}

等幅カラム

.columns {
 display: flex;
}

.column {
 flex: 1;
}

入力フォーム

.input-group {
 display: flex;
}

.input-group input {
 flex: 1;
}

.input-group button {
 flex-shrink: 0;
}

アイコン + テキスト

.icon-text {
 display: flex;
 align-items: center;
 gap: 8px;
}

メディアオブジェクト

.media {
 display: flex;
 gap: 16px;
}

.media-image {
 flex-shrink: 0;
}

.media-body {
 flex: 1;
}

実践メモ: 完全中央揃えはdisplay: flex; justify-content: center; align-items: center;の3行で実現。CSS Gridならplace-items: centerの1行でもOKです。

注意: flex-directionをcolumnにすると、justify-contentが垂直方向、align-itemsが水平方向になります。主軸と交差軸が入れ替わるので注意しましょう。

ショートハンド

プロパティ説明
flex-flow: row wrapflex-direction + flex-wrap
flex: 1 0 autoflex-grow + flex-shrink + flex-basis

まとめ

Flexbox は、1方向に並べるレイアウトで特に使いやすい仕組みです。まずは display: flex、justify-content、align-items、gap、flex の5つを押さえてください。

2方向の格子状レイアウトを細かく制御したい場合は、FlexboxではなくCSS Gridを検討します。

参考リソース

関連記事

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR