一纤掸、Flex布局是什么？

Flex是Flexible Box的縮寫(xiě)浑塞，意為"彈性布局"借跪，用來(lái)為盒狀模型提供最大的靈活性。

任何一個(gè)容器都可以指定為Flex布局酌壕。

語(yǔ)法：

display:flex;?

display:inline-flex;

注意掏愁，設(shè)為Flex布局以后，子元素的float卵牍、clear和vertical-align屬性將失效果港。

二、Flex布局相關(guān)概念

采用Flex布局的元素糊昙，稱為Flex容器（flex container）辛掠，簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flex item）萝衩，簡(jiǎn)稱"項(xiàng)目"回挽。

通過(guò)上圖我們可以得到：

1. 容器水平有主軸(（main axis），主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start欠气，結(jié)束位置叫做main end

2. 容器垂直有交叉軸（cross axis）厅各，交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end预柒。

3. 項(xiàng)目默認(rèn)沿主軸排列队塘。

4.單個(gè)項(xiàng)目 (item) 占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size宜鸯。

三憔古、Flex容器的屬性

1. flex-direction：決定主軸的方向，即項(xiàng)目的排列方向

flex-direction:row | row-reverse | column | column-reverse;

這四個(gè)屬性值分別表示：

row（默認(rèn)值）：主軸為水平方向淋袖，起點(diǎn)在左端鸿市。

row-reverse：主軸為水平方向，起點(diǎn)在右端即碗。

column：主軸為垂直方向焰情，起點(diǎn)在上沿。

column-reverse：主軸為垂直方向剥懒，起點(diǎn)在下沿内舟。

2. flex-wrap：定義如果一條軸線排不下，如何換行

當(dāng)我們把父元素的display設(shè)定為flex或者inline-flex的時(shí)候初橘，子元素是以單行的方式验游，彈性撐滿父元素。所以就要用flex-wrap來(lái)?yè)Q行保檐。這個(gè)屬性有三個(gè)值：

nowrap：預(yù)設(shè)值耕蝉，單行

wrap：多行

wrap-reverse：多行，但內(nèi)容元素反轉(zhuǎn)

3. flex-flow：flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式夜只，默認(rèn)值為row nowrap

flex-flow:?<flex-direction>|| <flex-wrap>垒在；

4. justify-content：定義了項(xiàng)目在主軸上的對(duì)齊方式

這個(gè)屬性有5個(gè)值，具體對(duì)齊方式與軸的方向有關(guān)扔亥。下面假設(shè)主軸為從左到右场躯。

flex-start（默認(rèn)值）：左對(duì)齊

flex-end：右對(duì)齊

center： 居中

space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等砸王。

space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等推盛。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍谦铃。

5. align-items：定義項(xiàng)目在交叉軸上如何對(duì)齊

align-items 剛好和 justify-content 相反耘成，align-items 決定了內(nèi)容元素在交叉軸上如何對(duì)齊，下面假設(shè)交叉軸從上到下。

flex-start：交叉軸的起點(diǎn)對(duì)齊瘪菌。

flex-end：交叉軸的終點(diǎn)對(duì)齊撒会。

center：交叉軸的中點(diǎn)對(duì)齊。

baseline: 項(xiàng)目的第一行文字的基線對(duì)齊师妙。

stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto诵肛，將占滿整個(gè)容器的高度。

6. align-content：定義了多根軸線的對(duì)齊方式默穴。

注意如果項(xiàng)目只有一根軸線怔檩，該屬性不起作用。

flex-start：與交叉軸的起點(diǎn)對(duì)齊蓄诽。

flex-end：與交叉軸的終點(diǎn)對(duì)齊薛训。

center：與交叉軸的中點(diǎn)對(duì)齊。

space-between：與交叉軸兩端對(duì)齊仑氛，軸線之間的間隔平均分布乙埃。

space-around：每根軸線兩側(cè)的間隔都相等。所以锯岖，軸線之間的間隔比軸線與邊框的間隔大一倍介袜。

stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。

四出吹、項(xiàng)目（item）的屬性

1. order屬性：定義項(xiàng)目的排列順序遇伞。數(shù)值越小，排列越靠前趋箩，默認(rèn)為0

.item{order: <integer>;}

2. flex-grow屬性:定義項(xiàng)目的放大比例赃额，默認(rèn)為0加派，即如果存在剩余空間叫确，也不放大

.item{flex-grow:<number>;}

flex-grow為零的話則不變化，不能為負(fù)值芍锦。如果所有項(xiàng)目的flex-grow屬性都為1竹勉，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的flex-grow屬性為2娄琉，其他項(xiàng)目都為1次乓，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。

3. flex-shrink屬性：定義了項(xiàng)目的縮小比例孽水，默認(rèn)為1票腰，即如果空間不足，該項(xiàng)目將縮小

.item{flex-shrink:<number>;}

如果所有項(xiàng)目的flex-shrink屬性都為1女气，當(dāng)空間不足時(shí)杏慰，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1缘滥，則空間不足時(shí)轰胁，前者不縮小。負(fù)值對(duì)該屬性無(wú)效朝扼。

4. flex-basis屬性:定義了在分配多余空間之前赃阀，項(xiàng)目占據(jù)的主軸空間（main size）

瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間擎颖。它的默認(rèn)值為auto榛斯，即項(xiàng)目的本來(lái)大小。它可以設(shè)為跟width或height屬性一樣的值搂捧，則項(xiàng)目將占據(jù)固定空間

.item{flex-basis:?<length>| auto;

5. flex屬性：flex-grow,flex-shrink和flex-basis的簡(jiǎn)寫(xiě)

默認(rèn)值為0 1 auto肖抱。后兩個(gè)屬性可選。該屬性有兩個(gè)快捷值：auto(1 1 auto) 和 none (0 0 auto)异旧。

6. align-self屬性：允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式意述，可覆蓋align-items屬性

默認(rèn)值為auto，表示繼承父元素的align-items屬性吮蛹，如果沒(méi)有父元素荤崇，則等同于stretch。

.item{align-self:auto | flex-start | flex-end | center | baseline | stretch;}

該屬性可能取6個(gè)值潮针，除了auto术荤，其他都與align-items屬性完全一致。