【CSS・学習ログ8】フレックスボックスについて

[コンテナプロパティ](#3コンテナにプロパティを指定)
[アイテムプロパティ](#4アイテムにプロパティを指定)

<font color=gray>教材：侍テラコヤ『HTML/CSSの基礎を学ぼう』https://terakoya.sejuku.net/programs/51/chapters</font>

## フレックスボックスとは
柔軟にレイアウト組めるCSSのレイアウト手法のこと。
HTMLにコンテナ(親要素)とアイテム(子要素)を準備して使用する。
### 1. コンテナとアイテムを作成する
class="flexbox-container"をコンテナ、class="flexbox-item"をアイテムとする。
![スクリーンショット 2023-12-03 102903.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/13765e9a-7682-20cf-7d88-afd59c771605.png)
```html
<!DOCTYPE html>
<html>
	<head>
		<title>タイトルです</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="flexbox.css">
	</head>
	<body>
		<div class="flexbox-container">
			<div id="item01" class="flexbox-item">
				<p>アイテム01<br>（子要素）</p>
			</div>
			<div id="item02" class="flexbox-item">
				<p>アイテム02<br>（子要素）</p>
			</div>
			<div id="item03" class="flexbox-item">
				<p>アイテム03<br>（子要素）</p>
			</div>
			<div id="item04" class="flexbox-item">
				<p>アイテム04<br>（子要素）</p>
			</div>
			<div id="item05" class="flexbox-item">
				<p>アイテム05<br>（子要素）</p>
			</div>
			<div id="item06" class="flexbox-item">
				<p>アイテム06<br>（子要素）</p>
			</div>
			<div id="item07" class="flexbox-item">
				<p>アイテム07<br>（子要素）</p>
			</div>
			<div id="item08" class="flexbox-item">
				<p>アイテム08<br>（子要素）</p>
			</div>
		</div>
	</body>
</html>
```
### 2. CSSでコンテナにdisplay: flex;を指定
display: flex;を指定することでFlexboxが有効になる。プロパティの初期値がrowなので、アイテムが左から右に横並びに配置される。
![スクリーンショット 2023-12-03 103159.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/8990f615-4009-e21f-9717-fcf9976a7c1d.png)

### 3.コンテナにプロパティを指定
コンテナに指定を入れると子要素すべてに適用される。

【指定できるプロパティ】
* flex-direction : アイテムの並び順を指定
* flex-wrap : アイテムの折り返しを指定
* flex-flow : 並び順と折り返しを一括で指定
* justify-content : アイテムの横方向(主軸)の揃え方を指定
* align-items : アイテムの縦方向(交差軸)の揃え方を指定
* align-content : アイテムを複数行にしたときの縦方向の揃え方

##### flex-direction : アイテムの並び順を指定
row(左から右)が初期値。row-reverseで右から左、columnで上から下、column-reverseで下から上に配置する。
```css
.flexbox-container {
	display: flex;
	flex-direction: row-reverse;
	padding: 5px;
	background-color: lightcyan;
}
```
![スクリーンショット 2023-12-03 105316.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/f08ea433-120e-3706-1be4-23a6f1c92221.png)

##### flex-wrap : アイテムの折り返しを指定
nowrap(折り返しなし)が初期値。wrapで上から下に折り返し、wrap-reverseで下から上に折り返す。
```css
.flexbox-container {
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	background-color: lightcyan;
}
```
![スクリーンショット 2023-12-03 110235.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/2e16f07a-cc5b-29e6-a592-240fb73b17c2.png)

##### justify-content : アイテムの横方向(主軸)の揃え方を指定
flex-start(左揃え)が初期値。flex-endで右揃え、centerで中央揃えになる。
ほか、space-between、space-aroudで均等配置。
##### align-items : アイテムの縦方向(交差軸)の揃え方を指定
stretch(コンテナの高さいっぱいに配置)が初期値。flex-startで上揃え、flex-endで下揃え、centerで中央揃えになる。
文字のベースラインで配置するときはbaselineを指定する。
★例　コンテナの高さを指定し、アイテムを下揃えで配置
```css
.flexbox-container {
	display: flex;
	align-items: flex-end;
	height: 500px;
	padding: 5px;
	background-color: lightcyan;
}
```
![スクリーンショット 2023-12-03 111353.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/339eb833-3603-be36-6e27-ee3cc655823c.png)

##### align-content : アイテムを複数行にしたときの縦方向の揃え方
stretch（コンテナの高さに広げて配置）が初期値。flex-start、flex-end、centerで上下中央を指定。
space-between、space-aroudで均等配置。
★例　折り返し指定で改行。一番下と上のアイテムを固定し、残りのアイテムを均等にする。
```css
.flexbox-container {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	height: 500px;
	padding: 5px;
	background-color: lightcyan;
}
```
![スクリーンショット 2023-12-03 112607.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/f145de1a-dfd3-383d-1b23-bc43acacf569.png)

### 4.アイテムにプロパティを指定
アイテム一つ一つに個別のスタイルを適応する。

【指定できるプロパティ】
* order：アイテムの並び順を指定
* flex-grow：アイテムの伸長係数(どれくらい伸びるか)を指定
* flex-shrink：アイテムの縮小係数(どれくらい伸びるか)を指定
* flex-basis：幅の初期サイズを指定
* flex：伸長係数、縮小係数、幅の初期サイズを一括で指定
* align-self：アイテムの縦方向の揃え方を指定
* 
##### order：アイテムの並び順を指定
コンテナに指定するflex-directionプロパティよりさらに細かく並び順を指定することができる。
```css
.flexbox-container {
	display: flex;
	padding: 5px;
	background-color: lightcyan;
}
.flexbox-item {
	padding: 5px;
	margin: 5px;
	background-color: orange;
}
 #item01 {
	order: 5;
 }
 #item02 {
	order: 6;
 }
 #item03 {
	order: 7;
 }
 :
 ```
![スクリーンショット 2023-12-12 203019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/43e15f77-9c42-2211-c598-5d95af2bb4e9.png)

##### flex-grow：アイテムの伸長係数(どれくらい伸びるか)を指定
数値を指定する。初期値は0。
```css
:
 #item06 {
 }
 #item07 {
	flex-grow: 1;
 }
 #item08 {
	flex-grow: 2;
 }
```
![スクリーンショット 2023-12-12 204149.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/552f2962-489a-3457-b29f-f6151c41778e.png)

##### flex-shrink：アイテムの縮小係数(どれくらい伸びるか)を指定
数値を指定する。初期値は１。
```css
#item01 {
	flex-shrink: 2;
}
#item02 {
}
#item03 {
}
 :
 ```
 ![スクリーンショット 2023-12-12 204605.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/340359a6-5e9e-e065-2766-8ddb661ff883.png)

##### flex-basis：幅の初期サイズを指定
pxや%で指定。初期値はauto。
```css
 #item01 {
	flex-basis: 150px;
 }
 #item02 {
	flex-basis: 25%;
 }
 #item03 {
 }
 :
```
![スクリーンショット 2023-12-12 204934.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/32840f3a-8a80-23d8-c551-5e33e4d07f44.png)

##### flex：伸長係数、縮小係数、幅の初期サイズを一括で指定
数値を指定する。半角スペースを空けて一括で指定。初期値は0、1、auto。
```css
.flexbox-item {
	padding: 5px;
	margin: 5px;
	background-color: orange;
	flex: 1 1 200px;
}
```
##### align-self：アイテムの縦方向の揃え方を指定
```css
 #item01 {
	align-self: flex-start; /*上揃え*/
 }
 #item02 {
 }
 #item03 {
	align-self: center; /*中央揃え*/
 }
 #item04 {
 }
 #item05 {
	align-self: flex-end; /*下揃え*/
 }
 #item06 {
 }
 #item07 {
	align-self: baseline; /*文字のベースライン*/
 }
 #item08 {
 }
```
![スクリーンショット 2023-12-12 210355.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/e090b79b-69d5-b3f0-5447-f410ae0787fa.png)
プロパティを指定していないアイテムは、コンテナのalign-itemの値を継承する。
align-itemの値を指定しない場合は、初期値のautoで適用され、コンテナの高さいっぱいに広がる。

<hr>