flex 佈局

Flex :Flexible box 彈性佈局，用來為盒裝模型提供最大的靈活性。任何的容器都可以指定為Flex佈局

.box{
diaplay:flex;
]

行內元素可以使用flex佈局

.box{
display:inline-flex
}

傳統的佈局時基於盒裝模型https://www.cnblogs.com/babilong/p/13355014.html，依賴於diaplay屬性，float屬性，position屬性。對於一些特殊的佈局就比較麻煩。

Flex佈局圖

圖示解讀：每一個Flex佈局都有一個主軸（main axis）和交叉軸（cross axis）又叫縱軸。

主軸的起點main start到main end。

　　交叉軸起點cross start到cross end。

　　flex item是佈局中的每一項即專案。

Flex的基本屬性

1.flex-direction屬性決定了專案的排列方式

flex-direction ：row | row-reverse | column |column-reserve

row（預設）：專案橫向排列，方向由左向右

row-revserse：專案橫向排列，方向由右向左

column：專案縱向排列，方向由上到下

column-severse：專案縱向排列，方向由下到上

2.flex-wrap屬性 決定了專案排列滿屏，是否換行

flex-wrap：wrap | nowrap | wrap-reverse

nowrap（預設）：不換行

wrap:換行，第一行在上面

wrap-reverse：換行，第一行在下面

3.flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡寫。

flex-flow：<flex-direction> <flex-wrap>

預設 flex-diretion：row nowrap；

4.justify-content:決定了專案在主軸上的對齊方式

justify-content：flex-start | flex-end | center |space-bewteen |space-around

flex-start（預設）：左對齊

fle-end：右對齊

center：居中排列

space-between：兩端對齊，專案之間的間隔都相等

space-around：每個專案的左右間隔都相等（每一個專案都被空白包圍，且左右間隔相等）

5.align-items屬性 決定了專案在交叉軸上的對齊方式

align-items：flex-start | flex-end | center | baseline | stretch

flex-start:上對齊

flex-end：下對齊

center：居中對齊

baseline：專案的第一行文字的基線對齊

stretch（預設）：如果專案沒有設定固定高度或設定為auto，專案則佔滿整個螢幕

6.align-content屬性 決定了多根軸線的對齊方式

注意：若軸線只有一根則該屬性不會起作用

align-content：flex-start | flex-end | center | space-around | space-between | stretch

flex-start :與交叉軸的起點對齊，以上邊界排列

flex-end：與交叉軸的終點對齊，以下邊界排列

center：與交叉軸的中點對齊，中間排列

space-around：每根軸線的兩側間隔相等

space-between：與上邊界與下邊界兩端對齊，且每根軸線的間隔相等

stretch（預設）：軸線佔滿交叉軸