Flexboxレイアウトまとめ

#Flexboxとは
Flexbox = Flexible Box Layout Module

CSS3から導入されたレイアウトモジュール
これを使うことfloatをサヨナラできます。

#用語
詳しくは[W3Cのflexページ](https://www.w3.org/TR/css-flexbox/#box-model)へ


#使い方
flexレイアウトを適用したい要素の親要素に`flex`を指定します。

```css
.flexbox {
  display: flex;
}
```

または

```css
.flexbox {
  display: inline-flex;
}
```

#基本レイアウト
##横並び
![スクリーンショット 2016-07-19 15.42.36.png](https://qiita-image-store.s3.amazonaws.com/0/69864/41745390-6fb2-f769-b96d-d3e52d4dc695.png)

[DEMO](http://codepen.io/takanorioki4/pen/AXVyLB)

##右寄せ
![スクリーンショット 2016-07-19 15.46.11.png](https://qiita-image-store.s3.amazonaws.com/0/69864/f7add697-e2d0-c7bd-5a3b-f85cf1d0e1fe.png)



```css
ul {
  display: flex;
  justify-content: flex-end;
}
```


##右寄せ(ロゴだけ左寄せ)
![スクリーンショット 2016-07-19 15.44.37.png](https://qiita-image-store.s3.amazonaws.com/0/69864/61c78ad6-1003-73a2-1500-7c5f8c74d986.png)


```css
ul {
  display: flex;
}

li:first-child {
   margin-right: auto;
}
```

[DEMO](http://codepen.io/takanorioki4/pen/akqYBN?editors=1100)

## 等間隔

### 各アイテムの周囲に均等なスペースを置くパターン

![image.png](https://qiita-image-store.s3.amazonaws.com/0/69864/68982e3f-68ba-4b6b-681a-12936f1afa36.png)

```css
ul {
  display: flex;
  justify-content: space-evenly;
}
```

[DEMO](https://codepen.io/takanorip/full/BmePMb)


### 最初のアイテムは始端にし、最後のアイテムは終端に接するパターン

![image.png](https://qiita-image-store.s3.amazonaws.com/0/69864/d4c41024-36f8-4250-4f9f-5d77c8c2082e.png)

```css
ul {
  display: flex;
  justify-content: space-between;
}
```

[DEMO](https://codepen.io/takanorip/pen/BmePMb)


### 最初のアイテムの前および最後のアイテムの後ろに置かれる余白のサイズが隣接するアイテム間の余白の半分に等しくなるパターン

![image.png](https://qiita-image-store.s3.amazonaws.com/0/69864/fe77bc7b-f6f6-e616-a525-7dbcf8cd86fc.png)

```css
ul {
  display: flex;
  justify-content: space-around;
}
```

[DEMO](https://codepen.io/takanorip/pen/GOaXoz)


##グリッド
![スクリーンショット 2016-07-19 15.39.06.png](https://qiita-image-store.s3.amazonaws.com/0/69864/e83d5f63-31a8-fca0-30fa-ddb37a8d87c2.png)

子要素に`flex = 1`を指定すると等幅で等間隔に並びます。
比率を変えたいときは、他の要素よりも大きくしたい要素の`flex`に大きい数字を指定します。
何も指定しなければセルの高さも自動的に揃います。

```css
.grid-cell {
  flex: 1;
}

.twice {
  flex: 2;
}
```

[DEMO](http://codepen.io/takanorioki4/pen/zBRWPq)

固定幅と可変幅のコンテンツを組み合わせることも可能です。
![スクリーンショット 2016-07-19 16.02.18.png](https://qiita-image-store.s3.amazonaws.com/0/69864/e33d5995-2865-e6ff-bb03-af5dae9e8cdf.png)

```css
.flexible {
  flex: 1;
}

.fixed {
  width: 200px;
}
```

[DEMO](http://codepen.io/takanorioki4/pen/OXQvaA)

##Vertical Align
![スクリーンショット 2016-07-19 16.42.30.png](https://qiita-image-store.s3.amazonaws.com/0/69864/826a4e96-3a6d-a67f-754d-b9b5eeafca0e.png)

今まで垂直方向の中央揃えは困難なものでした。
しかし、Flexboxの`align-items`、`align-self`、`justify-content`を使うことで簡単に実現できます。

**align-items**
flexコンテナ（親要素）に指定し、すべての子要素の垂直方向の配置を設定する。
詳しくは[こちら](https://developer.mozilla.org/ja/docs/Web/CSS/align-items)

**align-self**
flexアイテム（子要素）に指定し、個別に垂直方向の配置を設定する。
詳しくは[こちら](https://developer.mozilla.org/ja/docs/Web/CSS/align-self)

**justify-content**
flexコンテナ（親要素）に指定し、水平方向の配置を設定する。
詳しくは[こちら](https://developer.mozilla.org/ja/docs/Web/CSS/justify-content)


```html
<div class="contents">
	<div class="align">
		<p>それでどんどんいやたないとして楽長ただ。生ましましことでもましすると夜中の粗末者のうちがはいつも正確ならだて、みんなじゃ包みをしれんたです。見すぎ何は町でいいたて近くの狩の音楽家をわらい第一首らの練習へなっていたまし。へんは前叫んている。</p>
	</div>
</div>
```


```css
.contents {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

[DEMO](http://codepen.io/takanorioki4/pen/akqYgw?editors=1100)

##3カラムレイアウト(Holy Grail Layout)
![FireShot Capture 9 - CodePen - Holy Grail Layout - http___codepen.io_takanorioki4_full_YWZLWJ_.png](https://qiita-image-store.s3.amazonaws.com/0/69864/b8e1c711-398b-4ef7-e7c3-e6fd2b55257f.png)

Flexboxを使えばこのような3カラムレイアウトも簡単に実現することができます。
このフッターはコンテンツが少ない時でも画面の下に固定されるようになっています。

今回は縦に並べたいので、bodyに`flex-direction: column`を指定します。

また、navを一番左に持って行きたいので、side-navに`order: -1`を指定します。



```html
<body>
  <header>header</header>
  <div class="holyGrail">
    <main class="content">HolyGrail</main>
    <nav class="side-nav">nav</nav>
    <aside class="side-bar">side</aside>
  </div>
  <footer>footer</footer>
</body>
```


```css
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 0;
}

.holyGrail {
  display: flex;
  flex: 1;
}

.content {
  flex: 1;
}

.side-nav,
.side-bar{
  width: 200px;
}

.side-nav {
  order: -1;
}
```

[DEMO](http://codepen.io/takanorioki4/pen/YWZLWJ)



#参考
https://philipwalton.github.io/solved-by-flexbox/
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout