FlexBoxのプロパティと値をまとめたものです。
FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。
ネット上にも団子の串刺しのようなイラストが乱立しているようです。まずはプロパティの動きを覚えましょう。
しかし、FlexBoxのキモはflexプロパティの使いこなしだと思います。flexプロパティの初期値もしっかりと覚えておきましょう。
仕様書をしっかりと読み込むことを忘れないことが大事です。
Container
値の太字は初期値です。
-
flex-directionrow | row-reverse | column | column-reverse
-
flex-wrapnowrap | wrap | wrap-reverse
-
justify-contentflex-start | flex-end | center | space-between | space-around | space-evenly
-
align-itemsstretch | flex-start | flex-end | center | baseline
-
align-contentstretch | flex-start | flex-end | center | space-between | space-around
Item
値の太字は初期値です。
-
align-selfauto | stretch | flex-start | flex-end | center | baseline
-
order0 | integer
-
flex-grow0 | integer
-
flex-shrink1 | integer
-
flex-basisauto | integer
-
flex0 1 auto | int int int