| コンテナー | ||
|---|---|---|
| flex | inline-flex | 要素をflexコンテナーに変えます。 | |
| row | column | row-reverse | column-reverse | アイテムが流れる主軸を設定します。 | |
| flex-start | center | space-between | space-around | space-evenly | 主軸に沿ってアイテムを配置します。 | |
| stretch | center | flex-start | flex-end | baseline | 交差軸に沿ってアイテムを整列させます。 | |
| flex-start | center | stretch | space-between | 交差軸に余白があるとき、折り返した行を整列させます。 | |
| nowrap | wrap | wrap-reverse | 縮む代わりに、アイテムを新しい行へ折り返させます。 | |
| 0.5rem | 8px 16px | アイテム間の間隔。水平・垂直の両方に効きます。 | |
| アイテム | ||
| 0 | 1 | 2 | 兄弟に対する比率で、アイテムがどれだけ余白を取り込むか。 | |
| 0 | 1 | スペースが足りないとき、アイテムがどれだけ縮むか。 | |
| auto | 200px | 50% | 余白を分配する前の初期サイズ。 | |
| 1 | 1 0 auto | 0 0 200px | grow shrink basisの短縮形。 | |
| auto | center | flex-start | flex-end | stretch | 1つのアイテムでコンテナーのalign-itemsを上書きします。 | |
| 0 | -1 | 2 | ソースを変えずにアイテムの並び順を変えます。 | |