Flexboxとは何ですか？

CSSの1次元レイアウトシステム。要素を横並びや縦並びに柔軟に配置する。中央揃えが簡単にできる。

Flexboxのポイントは？

display: flexで有効化して、1次元（横or縦）にレイアウト。justify-content（主軸方向の配置）とalign-items（交差軸方向の配置）。flex-grow / flex-shrink / flex-basisで要素のサイズを柔軟に制御。中央揃え問題を一撃で解決（justify-content: center + align-items: center）

【ふれっくすぼっくす】

Flexbox とは？

💡 要素を「柔軟に」並べるCSS

📌 このページのポイント

display: flexで有効化して、1次元（横or縦）にレイアウト
justify-content（主軸方向の配置）とalign-items（交差軸方向の配置）
flex-grow / flex-shrink / flex-basisで要素のサイズを柔軟に制御
中央揃え問題を一撃で解決（justify-content: center + align-items: center）

Flexbox：主軸と交差軸でアイテムを柔軟に配置する1次元レイアウト

ひよこ

なぜFlexboxが便利なの？

ペンギン先生

Flexbox以前のCSS中央揃えは悪名高かった。margin: auto、position: absolute + transform、display: table-cell…いろんなハックが必要だった。Flexboxならdisplay: flex; justify-content: center; align-items: centerの3行で水平・垂直の完全中央揃えが完了。CSS史上最大の改善と言われているよ

ひよこ

主軸と交差軸って？

ペンギン先生

flex-direction: row（デフォルト）なら主軸が横方向、交差軸が縦方向。flex-direction: columnなら逆。justify-contentは主軸方向の配置（center、space-between、space-around等）、align-itemsは交差軸方向の配置を制御する。この「主軸」と「交差軸」の概念を理解すればFlexboxはマスターしたも同然だよ

ひよこ

おお！flex: 1って何？

ペンギン先生

flex: 1はflex-grow: 1; flex-shrink: 1; flex-basis: 0の省略形。「余っている空間を均等に分け合う」という意味。サイドバーをflex: 0 0 250px（固定250px）、メインコンテンツをflex: 1（残り全部）にすると、よくある2カラムレイアウトが簡単に作れるよ

ひよこ

flex-wrapって何？

ペンギン先生

デフォルトでは要素が1行に収まらなくても折り返さずに縮小される。flex-wrap: wrapを指定すると、収まらない要素が次の行に折り返す。レスポンシブなカード一覧を作る時に便利。ただし2次元の制御が必要ならCSS Gridの方が適しているよ

まとめ：ざっくりこれだけ覚えればOK！

「Flexbox」って出てきたら「要素を柔軟に1次元配置するCSSレイアウト」と思えればだいたいOK！

📖 おまけ：英語の意味

「Flexible Box Layout」＝柔軟なボックスレイアウト

💬 Flexible（柔軟な）Box（箱）レイアウト。CSSの「中央揃え問題」を解決した救世主だよ

← 用語集にもどる