はじめに
サポートブラウザ
| 属性 | Chrome | IE | Firefox | Safari | opera |
|---|---|---|---|---|---|
| flex | 29.0 21.0 -webkit- |
11.0 10.0 -ms- |
28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17 |
Flex box 属性
| プロパティ | 説明 |
|---|---|
| display | HTML要素に使用されるボックスのタイプを指定します |
| flex-direction | フレックスコンテナ内のフレキシブルアイテムの方向を指定します |
| justify-content | アイテムが主軸の使用可能なスペースをすべて使用していない場合、フレックスアイテムを水平方向に配置します |
| align-items | アイテムが交差軸上の使用可能なスペースをすべて使用していない場合、フレックスアイテムを垂直方向に整列します |
| flex-wrap | 1つのフレックスラインに十分なスペースがない場合に、フレックスアイテムを折り返すかどうかを指定します |
| align-content | flex-wrapプロパティの動作を変更します。 これはalign-itemsに似ていますが、フレックスアイテムを整列する代わりに、フレックスラインを整列します。 |
| flex-flow | フレックス方向とフレックスラップの省略形プロパティ |
| order | 同じコンテナ内の残りのフレックスアイテムに対するフレキシブルアイテムの順序を指定します |
| align-self | フレックスアイテムに使用されます。 コンテナのalign-itemsプロパティを上書きします |
| flex | flex-grow、flex-shrink、およびflex-basisプロパティの省略形プロパティ |
flex-direction のプロパティ値
| プロパティ | 説明 |
|---|---|
| flex-start | デフォルト値。 アイテムはコンテナの先頭に配置されます |
| flex-end | アイテムはコンテナの端に配置されます |
| center | アイテムはコンテナの中央に配置されます |
| space-between | アイテムの間にスペースがあります |
| space-around | アイテムの前、間、後にスペースがあります |
| space-evenly | アイテムの周囲には同じスペースがあります |
| initial | このプロパティをデフォルト値に設定します。 |
| inherit | 親要素からこのプロパティを継承します |
justify-content のプロパティ値
| プロパティ | 説明 |
|---|---|
| flex-start | デフォルト値。 アイテムはコンテナの先頭に配置されます |
| flex-end | アイテムはコンテナの端に配置されます |
| center | アイテムはコンテナの中央に配置されます |
| space-between | アイテムの間にスペースがあります |
| space-around | アイテムの前、間、後にスペースがあります |
| space-evenly | アイテムの周囲には同じスペースがあります |
| initial | このプロパティをデフォルト値に設定します |
| inherit | 親要素からこのプロパティを継承します。 |
align-itemsのプロパティ値
| プロパティ | 説明 |
|---|---|
| stretch | デフォルト。 アイテムはコンテナに合うように引き伸ばされます |
| center | アイテムはコンテナの中央に配置されます |
| flex-start | アイテムはコンテナの先頭に配置されます |
| flex-end | アイテムはコンテナの端に配置されます |
| baseline | アイテムはコンテナのベースラインに配置されます |
| initial | このプロパティをデフォルト値に設定します。 |
| inherit | 親要素からこのプロパティを継承します。 |
