displayプロパティの整理

CODEPREP | CSS基礎 display編を勉強したのでメモです。

flexboxのプロパティがいつもわからなくなるのですが、CSS flexible box の利用 - CSS: カスケーディングスタイルシート | MDNの用語を頭に入れてからコーディングすると、理解しやすいことがわかりました。最初からこれを読めばよかった...！

要素をリストアイテム(block要素のように振る舞うが、先頭にマーカーが入る)にするには、displayプロパティを利用して値にlist-itemを指定する

flexが指定された要素をFlex container(Flexコンテナ) と呼び、その子要素をFlex item(Flexアイテム) と呼ぶ
Flexコンテナの子要素だけがFlexアイテムとなる。孫要素はflexboxの影響を受けない
flexbox(Flexible Box)とは、ページレイアウトを様々なスクリーンサイズやディスプレイデバイスに適応しなければならない場合に、ページ上の要素が指定した通りに配置されるレイアウトモード(ボックスの位置やサイズを、兄弟要素や祖先要素のボックスとの相互作用を踏まえて決めるアルゴリズム)
すべてのflexboxには、Axis(軸)が2つある
- main axis (主軸。Flexアイテムのいずれに対しても平行な軸)
- cross axis(交差軸。main axisに対して垂直な軸)
参考
- CSS flexible box の利用 - CSS: カスケーディングスタイルシート | MDN
- Flex コンテナにおけるアイテムの位置合わせ - CSS: カスケーディングスタイルシート | MDN

Flexアイテムの主軸(デフォルトでは、左右)の配置を制御するプロパティ (Flexコンテナで指定する)
初期値は、flex-start (Flexアイテムを始端に集める)
他の値
- center (Flexアイテムを中央に集める)
- space-between (Flexアイテムを均等に配置する。最初のアイテムは始端、最後のアイテムは終端に配置)
- space-evenly (space-betweenと同じだが、最初のアイテムの始端との間と最後のアイテムの終端との間のスペースが、各アイテム間のスペースと同じになる)

Flexアイテム(複数行)の交差軸(デフォルトでは、上下)の配置を制御するプロパティ (Flexコンテナで指定する)
初期値は、stretch (Flexアイテムを均等に配置。最初のアイテムと上部との間と、最後のアイテムと下部との間のスペースが、各アイテム間のスペースと同じなる)
他の値
- flex-start (Flexアイテムを上部に集める)