justify-content
アイテムの水平方向での配置方法を設定できます。
- flex-start: アイテムをコンテナーの左側に配置します。
- flex-end: アイテムをコンテナーの右側に配置します。
- center: アイテムをコンテナーの中央に配置します。
- space-between: 複数のアイテムをその間に等しい間隔を空けて配置します。
- space-around: 複数のアイテムをその周囲に等しい間隔を空けて配置します。
align-items
アイテムの垂直方向での配置方法を設定できます。
- flex-start: アイテムをコンテナーの上部に配置します。
- flex-end: アイテムをコンテナーの下部に配置します。
- center: アイテムをコンテナーの垂直方向中央に配置します。
- baseline: アイテムをコンテナーのベースラインに配置します。
- stretch: アイテムをコンテナーの大きさに合うように配置します。
flex-direction
アイテムの配置方向を設定できます。
flex-direction: column のときは justify-content は垂直、align-items は水平の設定に変わる
- row: アイテムを行のテキスト方向に配置します。
- row-reverse: アイテムを行のテキスト方向に逆順で配置します。
- column: アイテムを上から下に向かって配置します。
- column-reverse: アイテムを下から上に向かって配置します。
order
個別のアイテムの表示順序を設定することができます。
orderに設定した数が小さい順に並び替えられます。
※orderを明示的に設定していない場合は0と認識する
(例)
並び替え前
1 番目のアイテム: order: 2
2 番目のアイテム: order: 3
3 番目のアイテム: order: 1
4 番目のアイテム: order: 3
5 番目のアイテム: order: 1
並び替え後
3 番目のアイテム: order: 1
5 番目のアイテム: order: 1
1 番目のアイテム: order: 2
2 番目のアイテム: order: 3
4 番目のアイテム: order: 3
align-self
個別のアイテムに対して align-itemsの設定を反映できます。
flex-wrap
アイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定することができます。
- nowrap: 全てのアイテムをひとつの行に配置します。
- wrap: 溢れるアイテムを他の行へ折り返します。
- wrap-reverse: アイテムを逆順にして他の行へ折り返します。
flex-flow
flex-directionとflex-wrapを統合したものです。
空白を挟むことで２つの設定を行えます。
flex-flow: row wrap = flex-direction: row + flex-wrap: wrap
align-content
複数行の行間を設定することができます。
align-itemsはコンテナーに含まれるアイテム全体の配置を設定するもので、align-contentは行間の余白を設定するもの
一行だけの場合はalign-cotentは何も効果がない
- flex-start: 行をコンテナーの上側に詰めて配置します。
- flex-end: 行をコンテナーの下側に詰めて配置します。
- center: 行をコンテナーの中央に詰めて配置します。
- space-between: 複数行をその間に等しい間隔を空けて配置します。
- space-around: 複数行をその周囲に等しい間隔を空けて配置します。
おすすめの学習サービス
ゲーム形式で学習できて、おすすめです。
それぞれのプロパティに関する説明も丁寧に記載されているので、これ一つでマスターできると思います。