◗
*
*
🟧
**
| justify-content | 主軸方向の揃え | |
| flex-start | 左寄せ(既定) | |
| flex-end | 右寄せ | |
| center | 中央 | |
| space-between | 両端+均等 | |
| space-around | 両側に等間隔 | |
| space-evenly | 全隙間を均等 |
*
*
*
*
*
*
*
*
*
| align-items | 交差軸方向の揃え | |
| stretch | 引き伸ばす(既定) | |
| flex-start | 上揃え | |
| flex-end | 下揃え | |
| center | 垂直中央 | |
| baseline | ベースライン揃え |
| gap | 子要素間の隙間 | |
| gap: 12px | 縦横とも12px | |
| gap: 8px 16px | 行間8px/列間16px | |
| row-gap | 行間のみ指定 | |
| column-gap | 列間のみ指定 |
| flex-wrap | 折り返し制御 | |
| nowrap | 折り返さない(既定) | |
| wrap | 次行へ折り返す | |
| wrap-reverse | 逆順で折り返す |
| flex-direction | 主軸の向き | |
| row | 横並び→(既定) | |
| row-reverse | 横並び逆順← | |
| column | 縦並び↓ | |
| column-reverse | 縦並び逆順↑ |
**
| margin | 要素の外側の余白 | |
| margin: 8px | 上下左右8px | |
| margin: 4px 8px | 上下4px/左右8px | |
| margin: 0 auto | 左右中央寄せ |
**
| padding | 要素の内側の余白 | |
| padding: 8px | 上下左右8px | |
| padding: 4px 8px | 上下4px/左右8px | |
| padding: 2px 4px 6px 8px | 上右下左(時計回り) | |
| padding-top等 | 個別指定も可 |
*
*
*
*
*