FlexBoxプロパティ〜まとめ

FlexBoxのプロパティと値をまとめたものです。
FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。
ネット上にも団子の串刺しのようなイラストが乱立しているようです。まずはプロパティの動きを覚えましょう。
しかし、FlexBoxのキモはflexプロパティの使いこなしだと思います。flexプロパティの初期値もしっかりと覚えておきましょう。
仕様書をしっかりと読み込むことを忘れないことが大事です。

flex レイアウト詳説〜Flex Box Layout

Container

値の太字は初期値です。

flex-direction

row | row-reverse | column | column-reverse
flex-wrap

nowrap | wrap | wrap-reverse
justify-content

flex-start | flex-end | center | space-between | space-around | space-evenly
align-items

stretch | flex-start | flex-end | center | baseline
align-content

stretch | flex-start | flex-end | center | space-between | space-around