隨著CSS3的到來婉宰，F(xiàn)lex布局出現(xiàn)了，F(xiàn)lex是Flexible Box的縮寫拌夏，意為"彈性布局"僧著，用來為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局障簿。行內(nèi)元素也可以使用Flex布局盹愚。布局的傳統(tǒng)解決方案，基于盒狀模型站故，依賴 display屬性 + position屬性 + float屬性皆怕。它對于那些特殊布局非常不方便，比如西篓，垂直居中就不容易實(shí)現(xiàn)愈腾。
在Flex布局里的4個(gè)重要名詞（Flex布局里的十二個(gè)屬性都是針對以下四個(gè)名詞）
1.flex-container——Flex容器
2.flex-items——Flex項(xiàng)目（容器里的各種元素）
3.主軸
4.側(cè)軸
先列舉flex-container的6個(gè)屬性：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1.flex-direction
其中flex-direction表示容器內(nèi)部的主軸方向岂津，flex-direction有4個(gè)主要屬性分別是"row,row-reverse,column,column"代表了Flex容器內(nèi)部的元素排列的方向reserse代表反向虱黄。
2.flex-wrap
flex-wrap表示換行，其默認(rèn)值為nowrap吮成，當(dāng)設(shè)置為warp時(shí)橱乱，F(xiàn)lex容器里面的元素排列時(shí)遇到空間不足會自動換行
3.flex-flow
flex-flow是以上兩個(gè)屬性flex-direction和flex-wrap的簡寫。flex-flow: <‘flex-direction’> || <‘flex-wrap’>粱甫。默認(rèn)值是flex-flow:row nowrap
4.justify-content
justify-content屬性定義了項(xiàng)目在主軸上的對齊方式泳叠。
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5個(gè)值茶宵，具體對齊方式與軸的方向有關(guān)危纫。下面假設(shè)主軸為從左到右。
flex-start（默認(rèn)值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項(xiàng)目之間的間隔都相等种蝶。
space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等契耿。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍蛤吓。
5.align-items
align-items屬性定義項(xiàng)目在側(cè)軸上如何對齊
flex-start：側(cè)軸的起點(diǎn)對齊宵喂。
flex-end：側(cè)軸的終點(diǎn)對齊。
center：側(cè)軸的中點(diǎn)對齊会傲。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto锅棕，將占滿整個(gè)容器的高度。
baseline: 項(xiàng)目的第一行文字的基線對齊淌山。
6.align-content
align-content屬性定義了多根軸線的對齊方式裸燎。如果項(xiàng)目只有一根軸線，該屬性不起作用泼疑。
flex-start：與側(cè)軸的起點(diǎn)對齊德绿。
flex-end：與側(cè)軸的終點(diǎn)對齊。
center：與側(cè)軸的中點(diǎn)對齊退渗。
stretch（默認(rèn)值）：軸線占滿整個(gè)側(cè)軸移稳。
space-between：與側(cè)軸兩端對齊，軸線之間的間隔平均分布会油。
space-around：每根軸線兩側(cè)的間隔都相等个粱。所以，軸線之間的間隔比軸線與邊框的間隔大一倍翻翩。
flex-items的6個(gè)屬性
1.order屬性定義項(xiàng)目的排列順序都许。數(shù)值越小，排列越靠前嫂冻，默認(rèn)為0胶征。
2.flex-grow
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0桨仿，即如果存在剩余空間睛低，也不放大。
如果所有項(xiàng)目的flex-grow屬性都為1服傍，則它們將等分剩余空間（如果有的話）暇昂。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1伴嗡，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。
3.flex-shrink屬性
flex-shrink屬性定義了項(xiàng)目的縮小比例从铲，默認(rèn)為1瘪校，即如果空間不足，該項(xiàng)目將縮小
如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)阱扬，都將等比例縮小泣懊。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1麻惶，則空間不足時(shí)馍刮，前者不縮小。
負(fù)值對該屬性無效窃蹋。
4.flex-basis屬性
flex-basis屬性定義了在分配多余空間之前卡啰，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性警没，計(jì)算主軸是否有多余空間匈辱。它的默認(rèn)值為auto，即項(xiàng)目的本來大小杀迹。
它可以設(shè)為跟width或height屬性一樣的值（比如350px）亡脸，則項(xiàng)目將占據(jù)固定空間。
5.flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫树酪，默認(rèn)值為0 1 auto浅碾。后兩個(gè)屬性可選.
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優(yōu)先使用這個(gè)屬性续语，而不是單獨(dú)寫三個(gè)分離的屬性垂谢，因?yàn)闉g覽器會推算相關(guān)值。
6.align-self屬性
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式绵载，可覆蓋align-items屬性埂陆。默認(rèn)值為auto，表示繼承父元素的align-items屬性娃豹，如果沒有父元素焚虱，則等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
該屬性可能取6個(gè)值懂版，除了auto鹃栽，其他都與align-items屬性完全一致。
