意外と知らないFlexBoxの挙動

# FlexBoxとは？
今更ではありますが、親要素に`display: flex`を指定することで、子要素をいい感じに並べてくれる便利なものです。
例えば

```sample.html
<div class="parent">
    <p class="child">子要素1</p>
    <p class="child">子要素2</p>
</div>
```
このhtmlに対して

```sample.css
.parent {
    width: 500px;
    padding: 10px;
    background-color: #e8f7ff;
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}
```
こんなスタイルを書くと
![スクリーンショット 2018-09-08 16.15.15.png](https://qiita-image-store.s3.amazonaws.com/0/218417/9556ba9e-ef6b-58ae-dd04-353f6e4d071e.png)
こんな感じに並びます。

CSSに1行足してFlexBoxにすると、

```sample.css
.parent {
    width: 500px;
    padding: 10px;
    background-color: #e8f7ff;
    display: flex; /* 追加 */
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}
```
![スクリーンショット 2018-09-08 16.18.06.png](https://qiita-image-store.s3.amazonaws.com/0/218417/d67573a8-45ca-6a66-c2ff-97d1bf872ac0.png)
こう並びます。
`justify-content`などを使うことで、左右両端揃えや中央揃えなども思いのままという便利なプロパティです。
この`display: flex`と組み合わせて使うプロパティの中で、`flex-direction`というものが存在するのですが、ご存知でしょうか？
今回はこの`flex-direction`についてちょっとだけ書いてみようと思います。

## flex-directionとは？
先ほどの`display: flex`ですが、FlexBoxにした親要素に対して指定するプロパティで、子要素の並べ方を指定するものです。
実はこれを使うと、子要素を縦に並べたり逆から並べたりできます。
具体的には

```sample.css
.parent {
    width: 500px;
    padding: 10px;
    background-color: #e8f7ff;
    display: flex;
    flex-direction: column; /* 追加 */
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}
```
こうすることで、子要素は
![スクリーンショット 2018-09-08 16.25.03.png](https://qiita-image-store.s3.amazonaws.com/0/218417/21b182f8-81c5-17b8-1a30-9a3cbe61ee94.png)
こんな感じで縦に並びます。
では、例えば親要素の高さを変えて、`justify-content: space-between`を指定するとどうなるでしょう。

```sample.css
.parent {
    width: 500px;
    height: 300px; /* 追加 */
    padding: 10px;
    background-color: #e8f7ff;
    display: flex;
    justify-content: space-between; /* 追加 */
    flex-direction: column;
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}
```
![スクリーンショット 2018-09-08 16.28.55.png](https://qiita-image-store.s3.amazonaws.com/0/218417/585b437f-5e13-ac37-8099-2ea2d047ed00.png)
縦幅に合わせて上下両端揃えになります。
通常のFlexBoxだと左右両端揃えになるので、これはちょっと意外でした。

また、`flex-direction: column-reverse`を使うとどうなるでしょうか。

```sample.css
.parent {
    width: 500px;
    height: 300px;
    padding: 10px;
    background-color: #e8f7ff;
    display: flex;
    justify-content: space-between;
    flex-direction: column-reverse;
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}
```
![スクリーンショット 2018-09-08 16.34.10.png](https://qiita-image-store.s3.amazonaws.com/0/218417/fe15fdbc-0229-662a-2aec-a911e9f4eb8f.png)
こんな感じで子要素がひっくり返ります。
ここで、`justify-content: flex-start`を使うと…

```sample.css
.parent {
    width: 500px;
    height: 300px;
    padding: 10px;
    background-color: #e8f7ff;
    display: flex;
    justify-content: flex-start;
    flex-direction: column-reverse;
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}
```
![スクリーンショット 2018-09-08 16.35.23.png](https://qiita-image-store.s3.amazonaws.com/0/218417/f20a4d20-4914-d350-f905-d34a3448da5a.png)
`start`なのに下に寄りました。
reverseとあるように、箱自体がひっくり返ったようになり、子要素は逆から並ぶようになります。

同様に、`flex-direction: row-reverse`を使うと

```sample.css
.parent {
    width: 500px;
    height: 300px;
    padding: 10px;
    background-color: #e8f7ff;
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}
```
![スクリーンショット 2018-09-08 16.40.11.png](https://qiita-image-store.s3.amazonaws.com/0/218417/bd1b2f81-191b-f785-aa4b-00e63bf309c5.png)
同じように逆から並びます。

こんな感じで、`flex-direction`と`justify-content`を組み合わせると結構面白いことができます。

## まとめ
- 横に並べるときは`flex-direction: row`(デフォルト)
- 縦に並べるときは`flex-direction: column`
- `flex-direction: row-reverse`でひっくり返すと、`justify-content`の揃え方も逆になる

実際に目で見て触ってみないと分からないことは多いですよね。
`flex-direction`で`reverse`をつけると`justify-content`の揃え方も逆になるのは、当然と言えば当然ですがちょっと驚きでした。
`flex-direction: column-reverse`などはあまり使う機会がないかもしれませんが、もし使う時が来た際に参考にしていただけると嬉しいです。

## 参考
http://www.htmq.com/css/flex-direction.shtml