[CSS]そろそろ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（縦配置）

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

row-reverse（横配置・並び順逆）

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

column-reverse（縦配置・並び順逆）

.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（初期値・折り返しなし）

.default-flex-wrap {
  display: flex;
  margin: 0;
  padding: 0;
  background: #ff7096;
}

wrap（折り返し）

.default-flex-wrap {
  display: flex;
  margin: 0;
  padding: 0;
  background: #ff7096;
  flex-wrap: wrap; //これを追加
}

wrap-reverse（折り返し・逆）

.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の続きを書きます。