12. Flexbox

Flex也是配置在一個容器內的元件之方法，需使用關鍵字 display: flex;來實現。首先先設計html元件如下:

	<div class="css12_1">
		<div>A</div>
		<div>B</div>
		<div>C</div>
		<div>D</div>
		<div>E</div>
		<div>F</div>
	</div>

flex-direction

在使用flex時，首先可以控制其流動方向，使用 flex-direction關鍵字，有以下選擇:

flex-direction: column; 由上往下
flex-direction: column-reverse; 由下往上
flex-direction: row; 由左往右
flex-direction: row-reverse; 由右往左

現在加上css code看看結果如何。

	div.css12_1{
		display: flex;
		flex-direction: row-reverse;
		background: #f1f1f1;
		border: 1px solid blue;
	}

	div.css12_1 > div{
		background: pink;
		font-size: 20px;
		font-weight: bolder;
		padding: 20px;
		margin: 5px;
		border: 1px solid green;
	}

A

B

C

D

E

F

flex-wrap

接下來介紹flex-wrap屬性，這是關於容器中元件超過容器寬度時的處理，在縮放視窗時會用到。有以下幾種選擇:

flex-wrap: nowrap; 不換行(預設值)
flex-direction: wrap; 換行
flex-direction: wrap-reverse; 由下往上換行
flex-flow: row wrap; 換行

因為要便於觀察，將容器中的元件增加。

	div.css12_2{
		display: flex;
		flex-wrap: wrap;
		background: #f1f1f1;
		border: 1px solid blue;
		width:50%;
	}

顯示結果如下:試著縮放視窗看其變化。

A

B

C

D

E

F

G

H

I

J

K

L

justify-content

跟Grid類似，Flex也有justify-content屬性，相關參數如下:

justify-content: flex-start; 靠容器開始端(預設值)
justify-content: flex-end; 靠容器結束端
justify-content: center; 置中
justify-content: space-around; 元件兩端都有空間
justify-content: space-between; 平分空間，與容器沒有間隙

原則上與Grid的justify-content類似。在第一例中加上 justify-content: space-around; 這行，顯示結果如下:

A

B

C

D

E

F

align-items

在垂直向對齊則使用align-items屬性，可選擇的參數有:

align-items: stretch; (預設值)
align-items: center;
align-items: baseline;
align-items: flex-start;
align-items: flext-end;

修改css code如下:

	div.css12_4{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		background: #f1f1f1;
		border: 1px solid blue;
		height: 500px;
	}

	div.css12_4 > div{
		background: pink;
		font-size: 20px;
		font-weight: bolder;
		padding: 20px;
		margin: 5px;
		border: 1px solid green;
		width: 1em;
	}

我們調整個別元件的height，可以看到元件都根據中點置中了。

A

B

C

D

E

F

align-content

align-content是調整的是垂直向多行對齊。可用的參數有:

align-content: stretch; (預設值) 拉伸填滿
align-content: space-between; 平分空間，靠兩端
align-content: space-around; 元件兩端有平分空間
align-content: center; 置中
align-content: flex-start; 靠開始端
align-content: flext-end; 靠結束端

舉例如下，為了較好顯示，容器內元件增加到12個。

	div.css12_5{
		display: flex;
		background: #f1f1f1;
		border: 1px solid blue;
		height: 500px;
		width: 600px;
		flex-wrap: wrap;
		align-content: space-around;
	}

	div.css12_5 > div{
		box-sizing: border-sizing;
		background: pink;
		font-size: 20px;
		font-weight: bolder;
		border: 1px solid green;
		margin: 10px;
		min-width: 100px;
		min-height: 100px;
	}

結果顯示如下:

A

B

C

D

E

F

G

H

I

J

K

L

關於容器內元件

容器內的元件也包含數個屬性可以用於調整。

order 屬性

我們可以直接調整其順序，例如以下之html 與 css code:

	<div class="css12_6">
		<div class="css12_6a">A</div>
		<div class="css12_6b">B</div>
		<div class="css12_6c">C</div>
		<div class="css12_6d">D</div>
		<div class="css12_6e">E</div>
		<div class="css12_6f">F</div>
	</div>

	div.css12_6{
		display: flex;
		align-content: stretch;
		background: #f1f1f1;
		border: 1px solid blue;
	}

	div.css12_6 > div{
		box-sizing: border-sizing;
		background: pink;
		font-size: 20px;
		font-weight: bolder;
		border: 1px solid green;
		margin: 10px;
		min-width: 100px;
		min-height: 100px;
		text-align: center;
		line-height: 100px;
	}

	.css12_6a{
		order: 3;
	}

	.css12_6b{
		order: 5;
	}

	.css12_6c{
		order: 2;
	}

	.css12_6d{
		order: 6;
	}
	.css12_6e{
		order: 4;
	}

	.css12_6f{
		order: 1;
	}

A

B

C

D

E

F

可以看到元件位置依照order的順序改變了。

flex

flex包含flex-grow, flex-shrink, flex-basis這三個屬性可用來控制容器內元件的尺寸，以下分別舉例說明。

flex-grow

	div.css12_7{
		display: flex;
		align-items: stretch;
		background: #f1f1f1;
		border: 1px solid blue;
	}

	div.css12_7 > div{
		box-sizing: border-sizing;
		background: pink;
		font-size: 20px;
		font-weight: bolder;
		border: 1px solid green;
		margin: 5px;
		width: 100px;
		text-align: center;
	}

	div.css12_7 div:first-child{
		flex-grow: 0;
	}

	div.css12_7 div:nth-child(2){
		flex-grow: 5;
	}

	div.css12_7 div:last-child{
		flex-grow: 1;
	}

A

B

C

flex-grow: 0;表示寬度不伸展，數字越大表示分配到更多多餘空間。

flex-shrink

顧名思義是收縮，以下範例說明。

	div.css12_8{
		display: flex;
		align-items: stretch;
		background: #f1f1f1;
		border: 1px solid blue;
	}

	div.css12_8 > div{
		box-sizing: border-sizing;
		background: pink;
		font-size: 20px;
		font-weight: bolder;
		border: 1px solid green;
		margin: 5px;
		width: 200px;
		text-align: center;
	}

	div.css12_8 div:nth-child(2){
		flex-shrink: 0;
	}

	div.css12_8 div:nth-child(5){
		flex-shrink: 0;
	}

	div.css12_8 div:last-child{
		flex-shrink: 3;
	}

A

B

C

D

E

F

G

H

I

J

K

L

此例中因為元件(200px)總寬度超過容器總寬度，所以元件會自然收縮，但是第2,5元件收縮率為0，所以保持原大小，最後一個收縮率為3，所以變更小，預設值為1。

flex-basis

flex-basis表示設定元件至特定大小。例如:

	div.css12_9{
		display: flex;
		background: #f1f1f1;
		border: 1px solid blue;
	}

	div.css12_9 > div{
		box-sizing: border-sizing;
		background: pink;
		font-size: 20px;
		font-weight: bolder;
		border: 1px solid green;
		margin: 5px;
		width: 100px;
		text-align: center;
	}

	div.css12_9 div:nth-child(2){
		flex-basis: 50px;
	}

	div.css12_9 div:nth-child(3){
		flex-basis: 200px;
	}

	div.css12_9 div:last-child{
		flex-grow: 2;
	}

此例中讓第2及3元件的寬度分別為50及200px，並讓最後一個元件grow，因此顯示以下結果。

A

B

C

D

E

F

以上三屬性可合併簡寫為例如flex: 0 0 50px;分別表示grow, shrink, and basis。如下例:

	div.css12_10{
		display: flex;
		background: #f1f1f1;
		border: 1px solid blue;
	}

	div.css12_10 > div{
		box-sizing: border-sizing;
		background: pink;
		font-size: 20px;
		font-weight: bolder;
		border: 1px solid green;
		margin: 5px;
		width: 100px;
		text-align: center;
	}

	div.css12_10 div:nth-child(2){
		flex: 0 0 50px;
	}

	div.css12_10 div:nth-child(3){
		flex: 2 0 0px;
	}

	div.css12_10 div:last-child{
		flex: 0 3 0px;
	}

A

B

C

D

E

F

用flex實現layout

很顯然flex可以幫助我們layout，與grid有類似的效果，接下來看以下例子:

	<div class="css12_11_header">Header</div>
	<div class="css12_11_nav">Nav Bar</div>
	<div class="css12_11_main">
		<div class="css12_11_left">Left Bar</div>
		<div class="css12_11_content">Content</div>
		<div class="css12_11_right">Right Bar</div>
	</div>
	<div class="css12_11_footer">Footer</div>

	div.css12_11_header{
		background: blue;
		color: gold;
		padding: 20px;
		text-align: center;
	}

	div.css12_11_nav{
		background: black;
		color: white;
		text-align: center;
	}


	div.css12_11_left{
		background: olive;
		color: yellow;
		margin: 0px;
		text-align: center;
		flex: 1;
	}

	div.css12_11_content{
		background: tomato;
		color: lime;
		margin: 0px;
		min-Height: 300px;
		text-align: center;
		flex-grow: 3;
	}

	div.css12_11_right{
		background: #99f5f8;
		color: red;
		margin: 0px;
		text-align: center;
		flex: 1;
	}

	div.css12_11_footer{
		background: green;
		color: white;
		text-align: center;
	}

	div.css12_11_main{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
	}

顯示如下：

Header

Nav Bar

Left Bar

Content

Right Bar

Footer

CSS