CSS長さ単位一覧
CSSで使われる代表的な長さ単位を、絶対単位・フォント相対単位・ビューポート相対単位に分けて整理した非公開検証用データ。
| property | applies_to | values_ja | note |
|---|---|---|---|
| display | コンテナ | flex / inline-flex | フレックスコンテナにする |
| flex-direction | コンテナ | row / row-reverse / column / column-reverse | 主軸の向き |
| flex-wrap | コンテナ | nowrap / wrap / wrap-reverse | 折り返しの可否 |
| flex-flow | コンテナ | direction wrap の一括指定 | directionとwrapのショートハンド |
| justify-content | コンテナ | flex-start / center / space-between など | 主軸方向の配置 |
| align-items | コンテナ | stretch / center / flex-start / baseline など | 交差軸方向の配置 |
| align-content | コンテナ | 複数行の交差軸配置 | 行が複数あるとき有効 |
| gap | コンテナ | 長さ(row gap / column gap) | アイテム間の余白 |
| order | アイテム | 整数(既定0) | 表示順を変える |
| flex-grow | アイテム | 数値(既定0) | 余白を分配する伸び率 |
| flex-shrink | アイテム | 数値(既定1) | 不足時の縮み率 |
| flex-basis | アイテム | 長さ / auto / content | 伸縮前の基準サイズ |
| flex | アイテム | grow shrink basis の一括指定 | 例 flex:1 |
| align-self | アイテム | align-itemsの個別上書き | そのアイテムだけ配置変更 |