display:flex系をまとめる①（古いブラウザ対応用）

flexってスマホサイトや最新のブラウザ対応だったらめちゃ便利だけど業務だとそうは言ってられない...
古いIE9~も対応せねばだったりAndroid2.3もサポートだったりというケースがあるのでまとめておく٩( 'ω' )و
IE8以下などはfloatやtableを検討するのもありかもね(´Д｀。)

flexのサポート範囲
https://caniuse.com/#search=flex

## 基本形
まずは基本となるベースを作っておく（色とサイズは適当）
![スクリーンショット 2017-11-27 18.42.25.png](https://qiita-image-store.s3.amazonaws.com/0/94307/30ea61b3-add8-acb6-8c6a-dcc55ea3fe45.png)

```html:html
<body>
  <div class="wrap">
    <div style="background-color: red;">1</div>
    <div style="background-color: blue;">2</div>
    <div style="background-color: green">3</div>
  </div><!-- /.wrap -->
</body>
```
```css:css
.wrap div{
  width: 100px;
  height: 100px;
}
```


## display: flex
親要素（.wrap）につけることで子要素の横並びレイアウトが簡単にできます！
![スクリーンショット 2017-11-27 18.56.57.png](https://qiita-image-store.s3.amazonaws.com/0/94307/91133731-5ae5-3e58-f212-991e447b02c1.png)

```css:css
.wrap{
  display: -webkit-box;  //この辺が
  display: -webkit-flex; //Android2.3~とか
  display: -ms-flexbox; //IE9~用
  display: flex; //最新のブラウザのみであればflexだけでもよいかも
}
```
## align-items
垂直方向の考え方
デフォルトは上揃え、左揃えになっている。
※白背景だとわかりにくかったため背景を黄色にしました。

### flex-start（上揃え）
![スクリーンショット 2017-11-27 19.19.43.png](https://qiita-image-store.s3.amazonaws.com/0/94307/fcb4443d-954b-00ad-b72e-fea7d80352a6.png)

```css:css
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
```

### flex-end（下揃え）
![スクリーンショット 2017-11-27 19.24.58.png](https://qiita-image-store.s3.amazonaws.com/0/94307/17d5d241-2308-9601-f019-f7e7573ff088.png)

```css:css
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
```

### center（中央寄せ）
![スクリーンショット 2017-11-27 19.26.53.png](https://qiita-image-store.s3.amazonaws.com/0/94307/f6a74342-f77e-6ce8-e795-193fde058473.png)

```css:css
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
```

### baseline
![スクリーンショット 2017-11-27 19.30.22.png](https://qiita-image-store.s3.amazonaws.com/0/94307/d8165b14-26ec-177d-1f2f-95a3ebd5de18.png)
高さが異なる要素でも文字のベースラインを合わせることができる！

```css:css
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
```

## justify-content
水平方向の考え方
デフォルトは左上揃えになっている。

### flex-start（左揃え）
![スクリーンショット 2017-11-27 19.40.24.png](https://qiita-image-store.s3.amazonaws.com/0/94307/6f75855c-a68f-18db-ca29-2265dc6bb396.png)

```css:css
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
```

### flex-end（右揃え）
![スクリーンショット 2017-11-27 19.44.04.png](https://qiita-image-store.s3.amazonaws.com/0/94307/d64e1178-3cf9-fc7b-cb5b-692b47d660b1.png)

```css:css
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
```

### center（中央揃え）
![スクリーンショット 2017-11-27 19.45.32.png](https://qiita-image-store.s3.amazonaws.com/0/94307/533a8617-6171-0e2c-f075-cb0209ccb339.png)

```css:css
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
```

### space-between（均等に間隔を空ける）
![スクリーンショット 2017-11-27 19.47.42.png](https://qiita-image-store.s3.amazonaws.com/0/94307/9261d1b5-b1b6-6315-ec7b-e7bc4efcc13a.png)

```css:css
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
```

### space-around（均等に間隔を空ける）
左右の端にも半分ずつ間隔が空いているver
![スクリーンショット 2017-11-27 19.51.26.png](https://qiita-image-store.s3.amazonaws.com/0/94307/074bc969-f446-bd20-0e35-d772cafcc106.png)

```css:css
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
```

長くなったので残りはdisplay:[flex系をまとめる②](https://qiita.com/kaip04/items/6fe3e300d46c08f49312)にてまとめる(｢ﾟｰﾟ)ﾄﾞﾚﾄﾞﾚ..