Flex 是什么
Flex Box全稱為Flexible Box胰伍，也即彈性布局，F(xiàn)lexbox布局比較適合Web應(yīng)用程序的一些小組件和小規(guī)模的布局，而Grid布局更適合用于一些大規(guī)模的布局。本文我們對(duì)FlexBox布局進(jìn)行詳細(xì)的介紹悬嗓。
Flex語(yǔ)法
任何一個(gè)容器都可以指定為Flex布局，塊元素和內(nèi)聯(lián)元素都可以裕坊；Webkit內(nèi)核的瀏覽器包竹，必須加上-webkit前綴。
塊元素：.box { display : flex ;}
內(nèi)聯(lián)元素：.box { display : inline-flex ;}
webkit內(nèi)核瀏覽器：
.box{
display:-webkit-flex;
display:flex;
}
! 容器設(shè)為flex布局后碍庵，子元素的float映企、clear、vertical-align屬性將會(huì)失效
采用Flex布局的元素静浴，稱為Flex容器堰氓，它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目苹享，簡(jiǎn)稱“項(xiàng)目”双絮。
Flex基本概念
如下圖所示，容器默認(rèn)存在兩根軸：水平的主軸main axis和垂直的交叉軸cross axis得问。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start囤攀，結(jié)束位置叫做main end；交叉軸的開(kāi)始位置叫做cross start宫纬，結(jié)束位置叫做cross end焚挠。
基本上，F(xiàn)lex項(xiàng)目是沿著main axis（從main strat 到main end） 或沿著cross size（從cross start 到cross end）排列漓骚。
容器屬性
容器共有6個(gè)屬性蝌衔，分別是：flex-direrction榛泛、flex-wrap、flex-flow噩斟、justify-content曹锨、align-items、align-content剃允。
flex-direction
flex-direction屬性規(guī)定主軸的方向沛简，即容器項(xiàng)目的排列方向。
flex-direction有四個(gè)值：row斥废、row-reverse椒楣、column、column-reverse营袜。
row為默認(rèn)值撒顿，表示主軸為水平方向丑罪，左邊為起點(diǎn)荚板。
row-reverse表示主軸為水平方向，右邊為起點(diǎn)吩屹，從右至左排列跪另。
column表示主軸為豎直方向，上邊為起點(diǎn)煤搜，從上至下排列免绿。
column-reverse表示主軸為豎直方向，下邊為起點(diǎn)擦盾，從下至上排列嘲驾。
代碼示例：
.box{
flex-direction : row | row-reverse | column | column-reverse ;
}
flex-wrap
flex-wrap屬性定義，如果一條軸線排不下迹卢，如何換行辽故。
flex-wrap屬性有三個(gè)值：no-wrap、wrap腐碱、wrap-reverse誊垢；
代碼示例：
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
no-wrap為默認(rèn)值，表示不換行
wrap為表示換行症见，換行后第一行在上方
wrap為表示換行喂走，換行后第一行在下方。
flex-flow
flex-flow屬性是flex-direction 和 flex-wrap屬性的簡(jiǎn)寫(xiě)形式谋作，默認(rèn)值為row no-wrap
代碼示例：
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
justify-content屬性定義了屬性在主軸上的對(duì)齊方式芋肠，有五個(gè)值：flex-start、flex-end遵蚜、center帖池、space-between秒咐、space-around、
-
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)目與邊框的間隔大一倍
代碼示例：
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
align-items
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊文兢，有五個(gè)值：flex-start晤斩、flex-end、center姆坚、stretch澳泵、base-line。
-
stretch為默認(rèn)值兼呵，如果項(xiàng)目未設(shè)置高度或設(shè)為auto時(shí)兔辅，項(xiàng)目將占滿整個(gè)容器的高度。 -
flex-start表示在交叉軸的起點(diǎn)對(duì)齊击喂； -
flex-end表示在交叉軸的終點(diǎn)對(duì)齊维苔； -
center表示在交叉軸的中點(diǎn)對(duì)齊； -
base-line表示以項(xiàng)目的第一行基線為準(zhǔn)對(duì)齊懂昂；
代碼示例：
.box{
align-items : stretch | flex-start | flex-end | center | base-line
}
align-content
align-content屬性定義了多跟軸線的對(duì)齊方式介时，如果該項(xiàng)目只有一根軸線，則該屬性不起作用凌彬。
該屬性有6個(gè)值：flex-start沸柔、flex-end、center铲敛、space-between褐澎、space-around、stretch原探。
- flex-start：與交叉軸的起點(diǎn)對(duì)齊乱凿。
- flex-end：與交叉軸的終點(diǎn)對(duì)齊。
- center：與交叉軸的中點(diǎn)對(duì)齊咽弦。
- space-between：與交叉軸兩端對(duì)齊徒蟆，軸線之間的間隔平均分布。
- space-around：每根軸線兩側(cè)的間隔都相等型型。所以段审，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸闹蒜。
代碼示例：
.box{
align-content : flex-start | flex-end | center | space-between
| space-around | stretch ;
}
項(xiàng)目屬性
項(xiàng)目屬性有6個(gè)：order寺枉、flex-grow抑淫、flex-shrink、flex-basis姥闪、flex始苇、align-self
order
order屬性定義項(xiàng)目的排列順序。數(shù)值越小筐喳，排列越靠前催式，默認(rèn)為0。
代碼示例：
.item { order: <integer> ; }
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)多一倍。
代碼示例：
.item {flex-grow: <number> ; }
flex-shrink
flex-shrink屬性定義了項(xiàng)目的縮小比例牌废，默認(rèn)為1咽白，即如果空間不足，該項(xiàng)目將縮小鸟缕。
代碼示例：
.item {
flex-shrink: <number>; /* default 1 */
}
flex-basis
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）排抬。瀏覽器根據(jù)這個(gè)屬性懂从，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto蹲蒲，即項(xiàng)目的本來(lái)大小番甩。
flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto届搁。后兩個(gè)屬性可選缘薛。
align-self
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;
}
