CSS Flexbox レイアウト実用チートシート
このページでは、コンテナ属性、項目属性、および一般的なレイアウト例を含む CSS Flexbox レイアウトの視覚的なチートシートを提供します。
コンテナ属性 (Container Properties)
| 属性 | 値 | 説明 |
|---|---|---|
display |
flex |
フレックスレイアウトを有効にする |
flex-direction |
row |
主軸は水平方向、起点（左端）から配置 |
row-reverse |
主軸は水平方向、起点（右端）から配置 | |
column |
主軸は垂直方向、起点（上端）から配置 | |
column-reverse |
主軸は垂直方向、起点（下端）から配置 | |
flex-wrap |
nowrap |
デフォルト値、項目を一列に配置する |
wrap |
項目を折り返す | |
wrap-reverse |
項目を逆方向に折り返す | |
justify-content |
flex-start |
主軸方向の揃え：左揃え（上揃え） |
flex-end |
主軸方向の揃え：右揃え（下揃え） | |
center |
主軸方向の揃え：中央揃え | |
space-between |
主軸方向の揃え：均等配置（両端はコンテナの端） | |
space-around |
主軸方向の揃え：各項目の周囲に均等なスペース。両端の空き・項目同士の空きが均等 | |
align-items |
flex-start |
交差軸方向の揃え：上端（または左端） |
flex-end |
交差軸方向の揃え：下端（または右端） | |
center |
交差軸方向の揃え：中央揃え | |
baseline |
交差軸方向の揃え：ベースラインで揃える | |
stretch |
デフォルト値、交差軸方向の揃え：コンテナの高さいっぱいに引き伸ばす | |
align-content |
flex-start |
複数行ある場合の交差軸揃え：上端（または左端） |
flex-end |
複数行ある場合の交差軸揃え：下端（または右端） | |
center |
複数行ある場合の交差軸揃え：中央揃え | |
space-between |
複数行ある場合の交差軸揃え：均等配置（両端はコンテナの端） | |
space-around |
複数行ある場合の交差軸揃え：各項目の周囲に均等なスペース | |
stretch |
デフォルト値、複数行ある場合の交差軸揃え：全体に引き伸ばす |
項目属性 (Item Properties)
| 属性 | 値 | 説明 |
|---|---|---|
flex-grow |
number |
項目の伸びる比率を定義する。デフォルトは 0（伸びない） |
flex-shrink |
number |
項目の縮む比率を定義する。デフォルトは 1 |
flex-basis |
auto |
項目が伸長される前のベースとなるサイズを定義する |
align-self |
auto |
個別の項目に対して異なる揃え方を設定する（align-items を上書き） |
flex-start |
容器の開始位置に配置 | |
flex-end |
容器の終了位置に配置 | |
center |
中央に配置 | |
baseline |
ベースラインで揃える | |
stretch |
容器に合わせて引き伸ばす（高さ指定がある場合） |
一般的なレイアウトの例
| レイアウト | コンテナ属性 | 項目属性 |
|---|---|---|
| 水平ナビゲーション | display: flex;justify-content: space-around; |
|
| 垂直サイドバー | display: flex;flex-direction: column;justify-content: flex-start; |
|
| グリッドレイアウト | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| カードレイアウト | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |