CSS flex〜チートシート(動画あり)

flexBoxの主軸と交差軸についての動画
Container
Item
justify-content （flex-direction:rowの場合）
align-items （flex-direction:rowの場合）
Web動画記事一覧

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