Flex-box 親要素に指定するプロパティ

よく使うFlexboxですが、時々、あれ？思う通りにいかないってことがあったりするので、いまいちどチートシートを参考に勉強。

## 参照
クリエイターボックスさんのチートシート
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet


## 基本の書き方

・ Flexコンテナー(親要素)
・Flexアイテム(子要素)

```pug
.container Flexコンテナー
  .item Flexアイテム1
  .item Flexアイテム2
  .item Flexアイテム3
  .item Flexアイテム4
```
<img width="590" alt="スクリーンショット 2017-11-30 17.02.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/9650b414-d2d6-32a7-27e5-a69700546742.png">


## Flexコンテナー(親要素)に指定するプロパティ

###・ ``` display:flex; ```
>要素を横並びにする
インライン要素に使うときは ```　display:inline-flex;```
<img width="795" alt="スクリーンショット 2017-11-30 17.01.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/fca2a2ab-ce35-dad1-23b6-3a8829eff704.png">


###・ ``` flex-direction```
>子要素の並ぶ向きを指定する

>　``` flex-direction:row(初期値)```
<img width="790" alt="スクリーンショット 2017-11-30 17.04.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/b3372022-0f6b-4513-939d-812250262e32.png">


>``` flex-direction:row-reverse ```
<img width="798" alt="スクリーンショット 2017-11-30 17.05.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/3527fb6d-0cb1-7bba-e9c0-4eaed1d71dd1.png">


>``` flex-direction:column ```
<img width="695" alt="スクリーンショット 2017-11-30 17.06.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/cecd7dff-99ec-6877-3edb-2391fb4e9a4a.png">


>``` flex-direction:column-reverse ```
<img width="665" alt="スクリーンショット 2017-11-30 17.07.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/f79544e4-a5de-b293-9c3c-1940b11dbd06.png">


###・ ``` flex-wrap```
こ要素を一行もしくは折り返して複数行に配置するかどうかを指定する
子要素が親要素の幅に収まらなくなった場合、折り返して複数行に配置される

>``` flex-wrap:nowrap(初期値) ```
<img width="795" alt="スクリーンショット 2017-11-30 17.01.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/fca2a2ab-ce35-dad1-23b6-3a8829eff704.png">


>``` flex-wrap:wrap ```
<img width="538" alt="スクリーンショット 2017-11-30 17.09.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/3134ff8c-6d8f-0696-3cff-4db8bc3d0f80.png">

>``` flex-wrap:wrap-reverse ```
<img width="495" alt="スクリーンショット 2017-11-30 17.14.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/bc9ba087-7144-ac36-2102-903dffbfdb61.png">

###・ ``` justify-content```
水平方向の揃えを指定する

>``` justify-content:flex-start(初期値) ```
左揃え
<img width="795" alt="スクリーンショット 2017-11-30 17.01.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/fca2a2ab-ce35-dad1-23b6-3a8829eff704.png">

>``` justify-content:flex-end ```
右揃え
<img width="797" alt="スクリーンショット 2017-11-30 17.20.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/ca55b84c-951e-e399-7713-5bcac8a89b03.png">

>``` justify-content:center ```
中央揃え
<img width="793" alt="スクリーンショット 2017-11-30 17.22.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/ac4118d2-60d9-3b59-f7a8-8c723419e995.png">

>``` justify-content:space-between ```
最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
<img width="791" alt="スクリーンショット 2017-11-30 17.22.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/ec9ff937-2ddb-5348-b2cc-8706a708c4fa.png">

>``` justify-content:space-around ```
両端の子要素も含め、均等に間隔をあけて配置
<img width="791" alt="スクリーンショット 2017-11-30 17.23.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/2902b25c-b2c0-d9e4-3efe-733a6ece5826.png">


###・ ``` align-items```
垂直方向の揃え

>``` align-items:stretch ```
親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
<img width="786" alt="スクリーンショット 2017-11-30 17.38.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/d645b0ca-9498-c175-69cf-e2dabffe6e19.png">

>``` align-items:flex-start ```
親要素の開始位置から配置。上揃え。
<img width="649" alt="スクリーンショット 2017-11-30 17.40.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/5a13fcce-823f-b1f8-7807-ed89a82ac9c5.png">

>``` align-items:flex-end ```
親要素の終点から配置。下揃え。
<img width="649" alt="スクリーンショット 2017-11-30 17.40.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/91344d3e-81c4-4a1a-9ead-6ca855b325d5.png">

>``` align-items:center ```
中央揃え
<img width="731" alt="スクリーンショット 2017-11-30 17.42.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/81949d70-de44-d7f3-0e13-cc5a210da411.png">

>``` align-items:baseline ```
ベースラインで揃える
<img width="750" alt="スクリーンショット 2017-11-30 17.42.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/2304570b-d508-0235-d84d-1819de3e16c4.png">

###・ ``` align-content```
複数行にした時の揃えを指定する
※```flex-wrap: nowrap;``` が適応されていると子要素が一行になるので、align-content は無効になる。

>``` align-content:stretch ```
<img width="399" alt="スクリーンショット 2017-11-30 17.49.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/c7cf61be-2b94-53b7-3f23-3bdba4051482.png">

>``` align-content:flex-start ```
<img width="412" alt="スクリーンショット 2017-11-30 17.51.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/e32a71cc-e723-5de8-c481-00942a9e46d9.png">

>``` align-content:flex-end ```
<img width="440" alt="スクリーンショット 2017-11-30 17.52.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/d2b1c463-9e2b-1d8f-9e71-1300f765c976.png">

>``` align-content:center ```
<img width="425" alt="スクリーンショット 2017-11-30 17.53.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/d35aafc4-5a53-3453-0634-c3f8c3f411b5.png">

>``` align-content:space-between ```
<img width="427" alt="スクリーンショット 2017-11-30 17.54.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/27f74f7c-da9c-a28e-d515-3d41fcf6b608.png">

>``` align-content:space-around ```
<img width="432" alt="スクリーンショット 2017-11-30 17.55.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/d14e4659-f0a7-65df-427f-8411b289223f.png">