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

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

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




flex-direction

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

基本になるhtml

<div class="default-flex">
    <div class="box">Box 01</div>
    <div class="box">Box 02</div>
    <div class="box">Box 03</div>
    <div class="box">Box 04</div>
</div>

row

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

column(縦配置)

Box 01
Box 02
Box 03
Box 04
.default-flex {
  display: flex;
  margin: 0;
  padding: 0;
  background: #ff7096;
  flex-direction: column; //これを追加
}

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

Box 01
Box 02
Box 03
Box 04
.default-flex {
  display: flex;
  margin: 0;
  padding: 0;
  background: #ff7096;
  flex-direction: row-reverse; //これを追加
}

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

Box 01
Box 02
Box 03
Box 04
.default-flex {
  display: flex;
  margin: 0;
  padding: 0;
  background: #ff7096;
  flex-direction: column-reverse; //これを追加
}

flex-wrap

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

基本になるhtml

<div class="default-flex-wrap">
    <div class="box">Box 01</div>
    <div class="box">Box 02</div>
    <div class="box">Box 03</div>
    <div class="box">Box 04</div>
    <div class="box">Box 05</div>
    <div class="box">Box 06</div>
    <div class="box">Box 07</div>
    <div class="box">Box 08</div>
    <div class="box">Box 09</div>
    <div class="box">Box 10</div>
</div>

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

Box 01
Box 02
Box 03
Box 04
Box 05
Box 06
Box 07
Box 08
Box 09
Box 10
.default-flex-wrap {
  display: flex;
  margin: 0;
  padding: 0;
  background: #ff7096;
}

wrap(折り返し)

Box 01
Box 02
Box 03
Box 04
Box 05
Box 06
Box 07
Box 08
Box 09
Box 10
.default-flex-wrap {
  display: flex;
  margin: 0;
  padding: 0;
  background: #ff7096;
  flex-wrap: wrap; //これを追加
}

wrap-reverse(折り返し・逆)

Box 01
Box 02
Box 03
Box 04
Box 05
Box 06
Box 07
Box 08
Box 09
Box 10
.default-flex-wrap {
  display: flex;
  margin: 0;
  padding: 0;
  background: #ff7096;
  flex-wrap: wrap-reverse; //これを追加
}

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

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

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

.hoge {
  flex-direction: column;
  flex-wrap: wrap;
}

↓↓↓↓↓↓↓↓↓↓↓↓

.hoge {
  flex-flow: column wrap;
}

このようにスッキリ。

まとめ

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

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