Flexbox
柔軟な1次元レイアウトを実現するCSS
Flexboxとは？
日常での例え：本棚の本
本棚に本を並べる時、左から詰めたり、中央に寄せたり、均等に並べたりしますよね。
Flexboxは「要素をどう並べるか」を簡単に指定できる仕組みです。
なぜFlexboxが必要？
昔の方法（float）の問題点：
- 横並びにするだけで複雑なコードが必要
- 「中央寄せ」「均等配置」が難しい
- 高さを揃えるのが大変
Flexboxなら：display: flex の1行で横並び完成！
「1次元レイアウト」とは？
横（行）か縦（列）の一方向に並べること。
両方向（格子状）に並べたい場合は「CSS Grid」を使います。
基本の使い方
display: flex
親要素に指定するだけで子要素が横並び
css
.container {
display: flex;
}
.item {
padding: 20px;
background: #3b82f6;
color: white;
}プレビュー
Item 1
Item 2
Item 3
flex-direction（並ぶ方向）
row / column
横並び or 縦並び
css
/* 横並び（デフォルト） */
.row { flex-direction: row; }
/* 横並び（逆順） */
.row-reverse { flex-direction: row-reverse; }
/* 縦並び */
.column { flex-direction: column; }
/* 縦並び（逆順） */
.column-reverse { flex-direction: column-reverse; }プレビュー
row
1
2
3
column
1
2
3
justify-content（主軸の配置）
「主軸」とは？
要素が並ぶ方向のこと。
横並び（row）の場合 → 主軸は横方向（左右の配置を制御）
縦並び（column）の場合 → 主軸は縦方向（上下の配置を制御）
主軸方向の配置
横並びなら左右、縦並びなら上下の配置
css
.container {
display: flex;
justify-content: flex-start; /* 左寄せ（デフォルト）*/
justify-content: flex-end; /* 右寄せ */
justify-content: center; /* 中央 */
justify-content: space-between;/* 両端に配置、間は均等 */
justify-content: space-around; /* 各要素の周りに均等な余白 */
justify-content: space-evenly; /* すべての間隔が均等 */
}プレビュー
flex-start
1
2
3
center
1
2
3
space-between
1
2
3
align-items（交差軸の配置）
「交差軸」とは？
主軸と直交する方向のこと。
横並び（row）の場合 → 交差軸は縦方向（上下の配置を制御）
縦並び（column）の場合 → 交差軸は横方向（左右の配置を制御）
交差軸方向の配置
横並びなら上下の配置
css
.container {
display: flex;
height: 150px;
align-items: stretch; /* 高さを伸ばす（デフォルト）*/
align-items: flex-start; /* 上揃え */
align-items: flex-end; /* 下揃え */
align-items: center; /* 中央揃え */
align-items: baseline; /* テキストのベースライン揃え */
}プレビュー
flex-start
1
2
center
1
2
flex-end
1
2
gap（要素間の余白）
gapプロパティ
子要素間の余白を一括指定
css
.container {
display: flex;
gap: 20px; /* 縦横同じ */
gap: 10px 20px; /* 縦 横 */
row-gap: 10px; /* 縦だけ */
column-gap: 20px; /* 横だけ */
}プレビュー
gap: 20px
Item
Item
flex-wrap（折り返し）
折り返しの制御
収まらない場合の振る舞い
css
.container {
display: flex;
flex-wrap: nowrap; /* 折り返さない（デフォルト）*/
flex-wrap: wrap; /* 折り返す */
flex-wrap: wrap-reverse; /* 逆方向に折り返す */
}プレビュー
Item 1
Item 2
Item 3
Item 4
子要素のプロパティ
flex-grow / flex-shrink / flex-basis って何？
flex-grow（伸びる比率）：余ったスペースをどれだけ取るか（0=伸びない）
flex-shrink（縮む比率）：スペースが足りない時どれだけ縮むか（1=縮む）
flex-basis（基準サイズ）：伸縮前の初期サイズ
flex-grow / flex-shrink / flex-basis
子要素の伸縮を制御
css
.item {
flex-grow: 0; /* 余白を埋めて伸びる比率（0=伸びない）*/
flex-shrink: 1; /* 縮む比率（1=縮む）*/
flex-basis: auto;/* 基準サイズ */
}
/* 一括指定（grow shrink basis）*/
.item { flex: 0 1 auto; } /* デフォルト */
.item { flex: 1; } /* 均等に伸びる */
.item { flex: none; } /* 伸縮しない */プレビュー
flex: 1
flex: 2
flex: 1
align-self
個別の交差軸配置
css
.container {
display: flex;
align-items: flex-start;
}
.special {
align-self: center; /* この要素だけ中央 */
}プレビュー
通常
align-self: center
通常
よく使うパターン
完全中央配置
縦横中央に配置
css
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}プレビュー
中央配置
ヘッダーレイアウト
ロゴ左、ナビ右
css
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}プレビュー
Logo