Flexbox
初級読み方：フレックスボックス｜英語：Flexbox
要素を横並び・縦並びにするレイアウト方法で、親要素に display: flex を指定するよ。
やさしい説明
Flexbox（フレックスボックス）とは、要素を横並びや中央揃えにするCSSレイアウト方法です。
本棚に本を並べるイメージです。親要素（本棚）に display: flex を指定すると、子要素（本）が自動で横に並びます。
横方向の配置は justify-content、縦方向の配置は align-items で制御します。「上下左右ど真ん中」も簡単に実現できます。
1次元（横一列 or 縦一列）のレイアウトに向いています。格子状に並べたい場合はGridを使います。
図解：Flexboxの仕組み
具体例・使い方
/* 横並び＋中央揃え */
.nav {
display: flex;
justify-content: center; /* 横方向中央 */
align-items: center; /* 縦方向中央 */
gap: 16px; /* 要素間の隙間 */
}
/* 両端揃え（ロゴ左、メニュー右） */
.header {
display: flex;
justify-content: space-between;
}よく使うプロパティ
| プロパティ | 役割 | よく使う値 |
|---|---|---|
display: flex | Flexboxを始める（親に付ける） | — |
justify-content | 横方向の配置 | center / space-between |
align-items | 縦方向の配置 | center |
gap | 要素同士の隙間 | 16px など |
flex-direction | 並ぶ向き | row（横）/ column（縦） |
いつ使う？
- ナビゲーションメニューを横並びにするとき
- 要素を上下左右の中央にぴったり配置したいとき
- ロゴを左・メニューを右に振り分けたいとき（space-between）
- カードやボタンを等間隔で横に並べたいとき
「上下左右ど真ん中」は display: flex; justify-content: center; align-items: center; の3行で実現できます。昔は難しかった中央寄せが、Flexboxで一気に簡単になりました。1次元（一列）はFlex、格子状（2次元）はGridが基本の使い分けです。
間違いやすいポイント
❌ 子要素にdisplay: flexを書いてしまう
display: flex は「並べたい要素の親（コンテナ）」に指定します。並べたい要素自体に書いても効きません。
/* ❌ 並べたい要素自体に書いても効かない */
.item { display: flex; }
/* ✅ 親要素に書く */
.container { display: flex; }❌ justify と align を取り違える
デフォルトでは justify-content が横方向、align-items が縦方向。覚えにくいときは「justify＝主軸（通常は横）」とセットで理解すると混乱しません。
よくある疑問
Q: FlexboxとGridの違いは？
A: Flexboxは1方向（横or縦）のレイアウト、Gridは2方向（横と縦）のレイアウトに向いています。ナビバーはFlex、カード一覧はGridが適しています。
Q: 要素を中央に配置するには？
A: 親要素に display: flex; justify-content: center; align-items: center; の3つを指定します。これで上下左右中央に配置できます。
Q: flex: 1 とは？
A: 子要素に flex: 1; を指定すると、余ったスペースを均等に分け合います。2つの子要素に flex: 1 を指定すると半分ずつになります。
関連用語
📖 関連レッスン
レッスンを見る →