作者 | 向建峰
來(lái)源 | 慕課網(wǎng)（imooc.com）
前言
Flex（Flexible Box）馋贤，意為”彈性布局”责球。“彈性”贸典，顧名思義视卢，就是具有彈簧的特性啦，能夠自由的伸縮（有點(diǎn)自適應(yīng)的意思啦）瓤漏。其實(shí)Flex并不是最近才出現(xiàn)的腾夯，而是早在十年前它就被提出。2009年蔬充，W3C提出了一種新的方案—-Flex布局蝶俱，可以簡(jiǎn)便、完整饥漫、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局榨呆。目前，它已經(jīng)得到了所有瀏覽器的支持庸队，這意味著积蜻，現(xiàn)在就能很安全地使用這項(xiàng)功能。
Flex布局如何使用彻消？
任何一個(gè)容器都可以指定為Flex布局
.box{
display: flex;
}
行內(nèi)元素也可以使用Flex布局
.box{
display: inline-flex;
}
示例
Flex概念知識(shí)
采用Flex布局的元素竿拆，稱(chēng)為Flex容器（flex container），簡(jiǎn)稱(chēng)”容器”。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為Flex項(xiàng)目（flex item）踊东，簡(jiǎn)稱(chēng)”項(xiàng)目”喳钟。
容器默認(rèn)存在兩根軸：
水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start茁肠，結(jié)束位置叫做main end渔隶；交叉軸的開(kāi)始位置叫做cross start寸认，結(jié)束位置叫做cross end怠肋。
項(xiàng)目默認(rèn)沿主軸排列敬鬓。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size笙各。
是不是感覺(jué)又學(xué)到了钉答？概念的東西了解就好了，這個(gè)不用記憶酪惭，不會(huì)跟上學(xué)背課文一樣希痴，還考試了。
Flex容器屬性
一春感、flex-direction：決定項(xiàng)目（item）的排列方向
flex-direction有四個(gè)值：
1、row（默認(rèn)值）：主軸為水平方向虏缸，起點(diǎn)在左端鲫懒。
2、row-reverse：主軸為水平方向刽辙，起點(diǎn)在右端窥岩。
3、column：主軸為垂直方向宰缤，起點(diǎn)在上沿颂翼。
4、column-reverse：主軸為垂直方向慨灭，起點(diǎn)在下沿朦乏。
上方那個(gè)示例圖，我們稍稍變陣一下氧骤，主軸設(shè)置為垂直方向呻疹，就會(huì)出現(xiàn)下圖布局。
示例：
還可以設(shè)置主軸為垂直方向筹陵，起點(diǎn)在下沿刽锤。
示例：
是不是覺(jué)得以后布局就用他（Flex）了？
二朦佩、flex-wrap
默認(rèn)情況下并思，item都排在一條線(xiàn)（又稱(chēng)”軸線(xiàn)”）上。flex-wrap屬性定義了语稠，如果一條軸線(xiàn)排不下宋彼，item的換行方式。
示例：
flex-wrap有三個(gè)值：
1、nowrap（默認(rèn)）：不換行
2宙暇、wrap：換行输枯，第一行在上方。
3占贫、wrap-reverse：換行桃熄，第一行在下方。
示例：
三型奥、flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式瞳收，默認(rèn)值為row nowrap。
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
示例：
四厢汹、justify-content：定義了item在主軸上的對(duì)齊方式
justify-content有五個(gè)值：
1螟深、flex-start（默認(rèn)值）：左對(duì)齊
2、flex-end：右對(duì)齊
3烫葬、center：居中
4界弧、space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等搭综。
5垢箕、space-around：每個(gè)item兩側(cè)的間隔相等。所以兑巾，item之間的間隔比item與邊框的間隔大一倍条获。
示例：
五、align-items：Item在交叉軸上如何對(duì)齊
1蒋歌、flex-start：交叉軸的起點(diǎn)對(duì)齊帅掘。
2、flex-end：交叉軸的終點(diǎn)對(duì)齊堂油。
3修档、center：交叉軸的中點(diǎn)對(duì)齊。
示例：
4称诗、baseline: 項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊萍悴。
5、stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto寓免，將占滿(mǎn)整個(gè)容器的高度癣诱。
六、align-content：多根軸線(xiàn)的對(duì)齊方式
多根軸線(xiàn)如何出現(xiàn)袜香？寬度超出撕予，換行后就會(huì)有多根軸線(xiàn)了。
1蜈首、flex-start：與交叉軸的起點(diǎn)對(duì)齊实抡。
2欠母、flex-end：與交叉軸的終點(diǎn)對(duì)齊。
3吆寨、center：與交叉軸的中點(diǎn)對(duì)齊赏淌。
4、space-between：與交叉軸兩端對(duì)齊啄清，軸線(xiàn)之間的間隔平均分布六水。
5、space-around：每根軸線(xiàn)兩側(cè)的間隔都相等辣卒。所以掷贾，軸線(xiàn)之間的間隔比軸線(xiàn)與邊框的間隔大一倍。
6荣茫、stretch（默認(rèn)值）：軸線(xiàn)占滿(mǎn)整個(gè)交叉軸想帅。
對(duì)比一下添加align-content和沒(méi)有align-content的區(qū)別：
示例：
項(xiàng)目(Item)的屬性
一、order
Item的排列順序啡莉。數(shù)值越小港准，排列越靠前，默認(rèn)為0票罐。
示例：
賦予item叉趣，一個(gè)排序值，根據(jù)這個(gè)值進(jìn)行排序该押。沒(méi)有設(shè)置值的默認(rèn)是0。
二阵谚、flex-grow
定義Item的放大比例蚕礼，默認(rèn)為0，即如果存在剩余空間梢什，也不放大奠蹬。意思就是將100%寬/高按什么比例分。
舉例：如果所有項(xiàng)目的flex-grow屬性都為1嗡午，則它們將等分剩余空間（如果有的話(huà)）囤躁。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1荔睹，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍狸演。（看上圖示例）
三、flex-shrink
定義了Item的縮小比例僻他，默認(rèn)為1宵距，即如果空間不足，該Item將縮小
看上圖：3個(gè)item的寬度和:100+200+200=500px吨拗，超出了box（400px）的寬度（超出了100px的寬）满哪，這時(shí)候item1/item2都設(shè)置了flex-shrink為0婿斥，而item3設(shè)置了flex-shrink為1，所以哨鸭，寬度不夠時(shí)民宿，item3將收縮，這里item3實(shí)際的寬度就是100px像鸡。
再看下圖：
item1/item3設(shè)置flex-shrink為1活鹰，而item2的flex-shrink為0，也就是說(shuō)坟桅，此時(shí)寬度超出后华望，將由item1、item3來(lái)等比縮小寬度仅乓，item2保持原有寬度赖舟。
四、flex-basis
flex-basis屬性定義了在分配多余空間之前夸楣，Item占據(jù)的主軸空間（main size）宾抓。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間豫喧。它的默認(rèn)值為auto石洗，即Item的本來(lái)大小。
示例：
這個(gè)屬性可以直接設(shè)置寬高代替紧显，如上圖注釋部分讲衫。
五、flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)孵班，默認(rèn)值為0 1 auto涉兽。后兩個(gè)屬性可選。
所以最前面的幾個(gè)示例篙程，都直接寫(xiě)的flex枷畏，其實(shí)flex就flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)。
六虱饿、align-self
align-self屬性允許單個(gè)Item有與其他Item不一樣的對(duì)齊方式拥诡，可覆蓋align-items屬性。默認(rèn)值為auto氮发，表示繼承父元素的align-items屬性渴肉，如果沒(méi)有父元素，則等同于stretch折柠。
示例：
這樣宾娜，就會(huì)把容器的align-items，覆蓋掉扇售。
看完上面內(nèi)容前塔，是不是發(fā)現(xiàn)Flex基本上可以搞定大部分的前端布局嚣艇？確實(shí)是這樣，它就是這么強(qiáng)大华弓，這也是他廣受大家喜愛(ài)的一個(gè)重要原因食零，如果不考慮低版本瀏覽器兼容問(wèn)題，我相信寂屏，float大家應(yīng)該用的越來(lái)越少了贰谣。
