HTML CSS Flexboxとは

要素を並べるのに`float: left;`使ってるけど、他にも並べる方法ないかなあ:thinking:

参考サイト→https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet#flexbox1
随時更新します

##Flexboxを使ってみよう
FlexboxとはFlexible Box Layout Moduleの略。左から順に並べられるのは勿論、右からや下からなど自由に要素をレイアウト出来る。

###基本

```flex_box01.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ブロックとインライン</title>
    <link rel="stylesheet" href="css/flex_box01.css">
  </head>
<body>
  <div class="container01">
    <div class="item">
      アイテム&ensp;1
    </div>
    <div class="item">
      アイテム&ensp;2
    </div>
    <div class="item">
      アイテム&ensp;3
    </div>
    <div class="item">
      アイテム&ensp;4
    </div>
  </div>
</body>
</html>
```

```flex_box01.css
.container01 {
	display: flex;
}
.item {
	margin: 10px 10px;
	padding: 2px 4px;
	background: #f8dcdc;
}
```
<img width="342" alt="20191129_Qiita01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/9d6526db-7560-1201-488d-a3b3f5f08a17.png">
`display: flex;`を親要素に適用し、子要素が横に並んだ。

###Flexboxで親要素に指定するプロパティ
htmlは上と同じ。

####flex-direction: row;
```flex_box02.css
.container01 {
	display: flex;
	flex-direction: row;
}
.item {
	~省略~
}
```
<img width="231" alt="20191129_Qiita02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/972b0da9-475a-5483-c6e7-31632610e730.png">
右から左へ並ぶ

####flex-direction: row-reserve;
```flex_box03.css
.container01 {
	display: flex;
	flex-direction: row-reverse;
}
.item {
	~省略~
}
```
<img width="225" alt="20191129_Qiita03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/1031518c-3c1c-b06e-0c40-913445d83613.png">
左から右へ並ぶ

####flex-direction: column;
```flex_box04.css
.container01 {
	display: flex;
	flex-direction: column;
}
.item {
	~省略~
}
```
<img width="639" alt="20191129_Qiita04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/5efa6b20-70a6-9c6f-cc97-47cd6cb5205f.png">
上から下へ並ぶ

####flex-direction: column-reverse;
```flex_box05.css
.container01 {
	display: flex;
	flex-direction: column-reverse;
}
.item {
	~省略~
}
```
<img width="639" alt="20191129_Qiita05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/564a1a90-6672-dd99-2711-0a96c3530ebd.png">
下から上へ並ぶ

####flex-wrap: nowrap;
説明のために数を増やした

```flex_box02.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ブロックとインライン</title>
    <link rel="stylesheet" href="css/flex_box.css">
  </head>
<body>
  <div class="container02">
    <div class="item">
      アイテム&ensp;1
    </div>
    <div class="item">
      アイテム&ensp;2
    </div>
    <div class="item">
      アイテム&ensp;3
    </div>
    <div class="item">
      アイテム&ensp;4
    </div>
    <div class="item">
      アイテム&ensp;5
    </div>
    <div class="item">
      アイテム&ensp;6
    </div>
    <div class="item">
      アイテム&ensp;7
    </div>
    <div class="item">
      アイテム&ensp;8
    </div>
    <div class="item">
      アイテム&ensp;9
    </div>
    <div class="item">
      アイテム&ensp;10
    </div>
  </div>
</body>
</html>
```

```flex_box06.css
body {
	~省略~
}
.container02 {
	margin: 10px auto;
	display: flex;
	flex-wrap: nowrap;
}
.item {
	~省略~
}
```
<img width="507" alt="20191129_Qiita06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/abcde8c3-2094-a158-57c8-27a384769c22.png">
折り返しなしで一行で並ぶ

####flex-wrap: wrap;

```flex_box06.css
body {
	~省略~
}
.container02 {
	margin: 10px auto;
	display: flex;
	flex-wrap: wrap;
}
.item {
	~省略~
}
```
<img width="458" alt="20191129_Qiita07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/37e5f209-e600-56da-bb3b-6d6937fbf844.png">
子要素が折り返して複数行になり、**上から下へ**並ぶ

####flex-wrap: wrap-reverse;

```flex_box07.css
body {
	~省略~
}
.container02 {
	margin: 10px auto;
	display: flex;
	flex-wrap: wrap-reverse;
}
.item {
	~省略~
}
```
<img width="454" alt="20191203_Qiita01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/0200e0d3-5c8c-2ee3-49f0-cc003881297b.png">
子要素が折り返して複数行になり、**下から上へ**並ぶ

####flex-flow: ;

```flex_box08.css
.container02 {
	margin: 10px auto;
	display: flex;
	flex-flow: row-reverse nowrap;
}
```
`flex-direction`と`flex-wrap`を一行で指定できるプロパティ。

####justify-content: flex-start;
```flex_box09.css
.container02 {
	margin: 10px auto;
	display: flex;
	justify-content: flex-start;
}
```
<img width="631" alt="20191203_Qiita02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/0f2c7936-35d0-e713-44cf-09b6fbf25230.png">
10個だと分かりにくかったので5個にした。親要素に空いているスペースがあるとき、子要素を**水平方向のどの位置に置くか指定**。
`flex-start`は左揃えになる。

####justify-content: flex-end;
```flex_box10.css
.container02 {
	margin: 10px auto;
	display: flex;
	justify-content: flex-end;
}
```
<img width="632" alt="20191203_Qiita03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/b5aec40f-e9d2-c5d4-0d29-86e107f6703e.png">
`flex-end`は右揃えになる

####justify-content: flex-center;
```flex_box11.css
.container02 {
	margin: 10px auto;
	display: flex;
	justify-content: flex-center;
}
```
<img width="632" alt="20191203_Qiita04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/185a846c-ea3e-439c-eeb4-ef5158bb0709.png">
`flex-center`は中央揃えになる

####justify-content: space-between;
```flex_box12.css
.container02 {
	margin: 10px auto;
	display: flex;
	justify-content: space-between;
}
```
<img width="960" alt="20191203_Qiita05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/92d93926-1951-94bb-f2ed-725b1ff58afa.png">
最初の子要素を左端、最後の子要素を右端に配置し、残りの要素は均等に間隔をあけて配置