flexboxを使ってwebページをレイアウトするざっくりメモ

HTMLのレイアウトにはfloatやclearを駆使したり、苦労してきました。
が、flexboxという便利なものがあることを知り、よく使いそうなところをざっくりメモしておきます。
2段組とかが簡単にできます。
ちなみにinstagramのwebページがflexboxを使ってます。

参考：[各ブラウザの対応状況](http://caniuse.com#search=flex)

# 基本

こんなHTMLを用意します。

```html:test.html
<div class="container">
  <div class="item">1つめ</div>
  <div class="item">2つめ<br>2つめ2行目</div>
  <div class="item">3つめ</div>
</div>
```

![スクリーンショット 2016-06-02 16.23.34.png](https://qiita-image-store.s3.amazonaws.com/0/75498/4b8ebc4c-e364-8a1d-0156-ec18d22755ea.png)


普通な感じです。

itemをいい感じに並べるために、itemの外側のcontainerに`display:flex`を指定します。

```css:style.css
.container {
  display: flex;
}
```

![スクリーンショット 2016-06-02 16.24.34.png](https://qiita-image-store.s3.amazonaws.com/0/75498/3debc431-a193-8433-de05-11990e38eefd.png)

横に並びました。
inline-blockに似ていますが、縦の長さは長いブロックに揃えられます。

itemの幅を同じにするために、itemに`flex:1`を指定します。

```css:style.css
.container {
  display: flex;
}
.item {
  flex: 1;
}
```

![スクリーンショット 2016-06-02 16.25.15.png](https://qiita-image-store.s3.amazonaws.com/0/75498/5667f784-ffe1-3e78-9376-c00f3908a820.png)

なんて簡単！

# flex-grow

さっき指定した`flex:1`の`flex`はショートハンドなので、`flex-grow:1`と同じです。
flex-growは、itemをどのぐらい伸ばすかを指定できます。
上の例では3つのitemをすべて1にしたので、同じ幅になりましたが、2つ目だけに1を指定すると、2つ目だけが幅いっぱいまで伸びます。

![スクリーンショット 2016-06-02 16.44.12.png](https://qiita-image-store.s3.amazonaws.com/0/75498/5e9b6a7e-1358-50d7-534f-186e20deb742.png)

itemに`flex:1`を指定して、2つ目だけ`flex:3`にすると、1:3:1の幅になります。

```css:style.css
.container {
  display: flex;
}
.item {
  flex: 1;
}
.item:nth-child(2) {
  flex: 3;
}
```

![スクリーンショット 2016-06-02 16.47.22.png](https://qiita-image-store.s3.amazonaws.com/0/75498/36e93c25-7316-8d1c-415f-a50396782733.png)

簡単！

# flex-direction

containerには、`flex-direction`でitemを並べる向きを指定することができます。
デフォルトが`row`なので、何も指定しないと`flex-direction:row`を指定したのと同じになります。
今までの例を見てわかるように、`row`が横並び、`column`が縦並びになります。(なんか直感的じゃない気がするけど…)
他にそれぞれ逆順に並ぶ、`row-reverse`(右から左へ並ぶ)、`column-reverse`(下から上へ並ぶ)が指定できます。

containerに`flex-direction:column`を指定して、高さも指定し、2つ目のitemだけ`flex:1`にすると、以下のようになります。

```css:style.css
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.item:nth-child(2) {
  flex: 1;
}
```

![スクリーンショット 2016-06-02 17.05.24.png](https://qiita-image-store.s3.amazonaws.com/0/75498/16b0300d-5c32-8ca3-c653-debfc561cdef.png)

ちなみに`height`で指定した`100vh`のvhという単位は、viewport heightで、ビューポート(画面)の高さに対する割合です。なので、`100vh`は画面の高さいっぱいということになります。

ヘッダ、メインコンテンツ、フッタ、のような構成の時に使えますね！

# order
itemを表示する順番は、各itemに`order`を指定して並び替えることができます。

```css:style.css
.container {
  display: flex;
}
.item {
  flex: 1;
}
.item:first-child {
  order: 1;
}
```

![スクリーンショット 2016-06-02 17.26.58.png](https://qiita-image-store.s3.amazonaws.com/0/75498/5c4fa341-5a7e-9dd0-c4d0-134b3ee0252a.png)

`order`のデフォルト値は0なので、1つ目に`order:1`を指定すると最後に表示されます。

HTML的にはメインコンテンツを最初の方に書いておいて、後の方に書いたナビゲーションブロックを上に表示する、ということもできます。
後からレイアウトが変更になってもCSSだけで変更できるのは良いですね。

# justify-content

item同士の間隔や右寄せ、左寄せなどは`justify-content`で指定できます。
`justify-content:space-between`を指定すると、item間にスペースが入って幅いっぱいに等間隔で並びます。

```css:style.css
.container {
  display: flex;
  justify-content: space-between;
}
```

![スクリーンショット 2016-06-02 17.56.07.png](https://qiita-image-store.s3.amazonaws.com/0/75498/eafee53b-107e-e8ab-3340-7371910d3a79.png)

他に、`flex-start`(始端：flex-directionがrowの時は左寄せ)、`flex-end`(終端：flex-directionがrowの時は右寄せ)、`center`(中央寄せ)、`space-around`(各itemの周りにスペースが入る)などが指定できます。

メニューボタンを並べたりする時に使うかも。