flexbox part1

flexboxとは

flexible box layout module の略です。名前通りフレキシブルで。これがかなり便利。

flex-direction

・row(デフォルト）：横並び。左から。
・row-reverse：その逆。右から。
・column：縦並び。上から
・column-reverse：その逆。下から。

html

css

結果

flex-wrap

・no-wrap：初期値。
・wrap：枠を超えたら、折りたたむ。
・wrap-reverse：右下から始まる。

html

css

結果

今回は、wrap-reverseを使ってみました。