[CSS]そろそろFlexboxをまとめてみる Part.2

そろそろFlexboxをまとめてみる Part.2

前回の続きです。
Flexboxの色々なプロパティを見ていきましょう。

flex-direction

「flex-direction」は子要素の配置方向を指定するプロパティです。

基本になるhtml

row

初期値なので、特に何も指定はしません。

column(縦配置)

Box 01
Box 02
Box 03
Box 04

row-reverse(横配置・並び順逆)

Box 01
Box 02
Box 03
Box 04

column-reverse(縦配置・並び順逆)

Box 01
Box 02
Box 03
Box 04

flex-wrap

「flex-wrap」は子要素の折り返しを指定できます。

基本になるhtml

nowrap(初期値・折り返しなし)

Box 01
Box 02
Box 03
Box 04
Box 05
Box 06
Box 07
Box 08
Box 09
Box 10

wrap(折り返し)

Box 01
Box 02
Box 03
Box 04
Box 05
Box 06
Box 07
Box 08
Box 09
Box 10

wrap-reverse(折り返し・逆)

Box 01
Box 02
Box 03
Box 04
Box 05
Box 06
Box 07
Box 08
Box 09
Box 10

「flex-flow」ショートハンド

上記の「flex-direction」と「flex-wrap」プロパティはショートハンドでまとめることができます。

例えば「縦並びの折り返しあり」の場合

このようにスッキリ。

まとめ

今回のプロパティはあまり使い所はなさそうですけど、いつかどこかで役に立つかもレベルで頭の片隅にでも。

次回もFlexboxの続きを書きます。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク