フレックスボックスの用語とプロパティ
勉強をはじめたばかりの頃に、下記を書きました。
flexbox については、manaさんが、チートシートを配布してくださっているので、ダウンロードして印刷し、机の前に貼っています。
https://www.webcreatorbox.com/
日本語対応 flexbox チートシート
flexbox 用語
DIV要素を、フレックスアイテム（flexitem）
それを囲む親要素を、フレックスコンテナー（flexcontainer） と呼ぶ。
親要素に、display:flexを宣言すると、
主軸は、左から右。
交差軸は、上から下となる。
主軸と交差軸を意識することが大事。
フレックスコンテナー（flexcontainer）に設定できるプロパティ
- flex-direction
- justify-content
- align-items
- flex-wrap
- align-content
flex-directionは主軸の方向を決める
- flex-direction:row
- flex-direction:row-reverse
- flex-direction:column
- flex-direction:column-reverse
- flex-direction:row
flex-direction:row
初期値は row 。
主軸は、左から右。
flex-direction:row-reverse
主軸は右から左。
flex-direction:column
主軸は、上から下。
フレックスアイテム（flexitem）は、上から下へ縦に並ぶ。
flex-direction:column-reverse
主軸は、下から上。
フレックスアイテム（flexitem）は、下から上へ縦に並ぶ。
justify-contentは主軸に沿って要素をいかに並べるかを決める
flex-direction:row がまず宣言されている時
justify-content:flex-start
主軸は左から右なので、左揃えで、要素が並べられる。
justify-content:flex-end
主軸は左から右なので、右揃えで、要素が並べられる。
justify-content:center
主軸にそって、中央に要素が並べられる。
justify-content:space-between
主軸にそって、要素間に空白が配置され、均等に並べられる。
align-itemsは交差軸に沿って要素をいかに並べるかを決める
flex-direction:row がまず宣言されている時
align-items:flex-start
交差軸の始点なので、上揃えに並べられる。
align-items:flex-end
交差軸の終点、下揃えに並べられる。
align-items:center
中央に並べられる。
flex-wrapは、要素がコンテナーの幅を超える時に使う
flex-wrap の初期値は、nowrap です。
flex-direction:row が宣言されている時
flex-wrap:nowrap
コンテナーの幅を超えたら、要素が小さくなって幅の中に並べられる。
flex-wrap:wrap
コンテナーの幅を超えたら、次の段に並べられる。
交差軸に余裕がある時は、段の間に隙間ができる。
交差軸方向に揃えたい時
上縁に揃える時は
align-content:flex-start
下縁に揃える時は
align-content:flex-end
中心に据える時は
align-content:center
上縁と下縁にそろえて間に隙間を作る時は
align-content:space-between
flex-wrap:wrap-reverse
交差軸が反転。
コンテナーの下縁に、主軸の方向、左から右へ並べ、溢れた要素を上の段に並べる。
フレックスアイテム（flexitem）に設定できるプロパティ
- align-self
- order
- flex-basis
- flex-wrap
- flex-shrink