Flex_Base
-
任何一個(gè)容器都可以指定為 Flex 布局族跛。
.box{ display: flex; /** Webkit 內(nèi)核的瀏覽器亩钟，必須加上`-webkit`前綴师骗。 */ display: -webkit-flex; /* Safari */ display: flex; }- 行內(nèi)元素也可以使用 Flex 布局。
- Webkit 內(nèi)核的瀏覽器，必須加上
-webkit前綴芭逝。
注意呈础，設(shè)為 Flex 布局以后舆驶，子元素的
float、clear和vertical-align屬性將失效而钞。
容器的屬性
-
以下6個(gè)屬性設(shè)置在容器上沙廉。
-
flex-direction
-
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。.box { flex-direction: row | row-reverse | column | column-reverse; } /** row（默認(rèn)值）：主軸為水平方向笨忌，起點(diǎn)在左端蓝仲。 row-reverse：主軸為水平方向，起點(diǎn)在右端官疲。 column：主軸為垂直方向袱结，起點(diǎn)在上沿。 column-reverse：主軸為垂直方向途凫，起點(diǎn)在下沿垢夹。 */
-
-
flex-wrap
-
默認(rèn)情況下，項(xiàng)目都排在一條線(xiàn)（又稱(chēng)"軸線(xiàn)"）上维费。
flex-wrap屬性定義果元，如果一條軸線(xiàn)排不下，如何換行犀盟。.box{ flex-wrap: nowrap | wrap | wrap-reverse; } /** nowrap（默認(rèn)）：不換行而晒。 wrap：換行，第一行在上方阅畴。 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
-
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。.box { justify-content: flex-start | flex-end | center | space-between | space-around; } /** 它可能取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)目與邊框的間隔大一倍够滑。 */
-
-
align-items
-
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊垦写。.box { align-items: flex-start | flex-end | center | baseline | stretch; } /** 它可能取5個(gè)值。具體的對(duì)齊方式與交叉軸的方向有關(guān)彰触，下面假設(shè)交叉軸從上到下梯投。 flex-start：交叉軸的起點(diǎn)對(duì)齊。 flex-end：交叉軸的終點(diǎn)對(duì)齊况毅。 center：交叉軸的中點(diǎn)對(duì)齊分蓖。 baseline: 項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊。 stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto尔许，將占滿(mǎn)整個(gè)容器的高度么鹤。 */
-
-
align-content
-
align-content屬性定義了多根軸線(xiàn)的對(duì)齊方式。如果項(xiàng)目只有一根軸線(xiàn)味廊，該屬性不起作用蒸甜。.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } /** 該屬性可能取6個(gè)值。 flex-start：與交叉軸的起點(diǎn)對(duì)齊余佛。 flex-end：與交叉軸的終點(diǎn)對(duì)齊柠新。 center：與交叉軸的中點(diǎn)對(duì)齊。 space-between：與交叉軸兩端對(duì)齊辉巡，軸線(xiàn)之間的間隔平均分布恨憎。 space-around：每根軸線(xiàn)兩側(cè)的間隔都相等。所以郊楣，軸線(xiàn)之間的間隔比軸線(xiàn)與邊框的間隔大一倍憔恳。 stretch（默認(rèn)值）：軸線(xiàn)占滿(mǎn)整個(gè)交叉軸。 */
-
-
項(xiàng)目的屬性
-
以下6個(gè)屬性設(shè)置在項(xiàng)目上净蚤。
-
order-
order屬性定義項(xiàng)目的排列順序钥组。數(shù)值越小，排列越靠前今瀑，默認(rèn)為0者铜。.item { order: <integer>; }
<style> .main{ display: flex; } .a{ order: 3; } .b{ order: 2; } .c{ order: 1; } </style> <body> <!-- 數(shù)值越小，排列越靠前放椰，默認(rèn)為0 --> <div class="main"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </div> </body> -
-
flex-grow-
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0愉粤，即如果存在剩余空間砾医，也不放大。.item { flex-grow: <number>; /* default 0 */ }如果所有項(xiàng)目的
flex-grow屬性都為1衣厘，則它們將等分剩余空間（如果有的話(huà)）如蚜。如果一個(gè)項(xiàng)目的flex-grow屬性為2压恒，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍错邦。
-
-
flex-shrink-
flex-shrink屬性定義了項(xiàng)目的縮小比例探赫，默認(rèn)為1，即如果空間不足撬呢，該項(xiàng)目將縮小伦吠。.item { flex-shrink: <number>; /* default 1 */ }如果所有項(xiàng)目的
flex-shrink屬性都為1，當(dāng)空間不足時(shí)魂拦，都將等比例縮小毛仪。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1芯勘，則空間不足時(shí)箱靴，前者不縮小。負(fù)值對(duì)該屬性無(wú)效荷愕。
-
-
flex-basis.item { flex-basis: <length> | auto; /* default auto */ }-
flex-basis屬性定義了在分配多余空間之前衡怀，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性安疗，計(jì)算主軸是否有多余空間抛杨。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小茂契。 - 它可以設(shè)為跟
width或height屬性一樣的值（比如350px）蝶桶，則項(xiàng)目將占據(jù)固定空間。
-
-
flex-
flex屬性是flex-grow,flex-shrink和flex-basis的簡(jiǎn)寫(xiě)掉冶，默認(rèn)值為0 1 auto真竖。后兩個(gè)屬性可選。.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }該屬性有兩個(gè)快捷值：
auto(1 1 auto) 和 none (0 0 auto)厌小。建議優(yōu)先使用這個(gè)屬性恢共，而不是單獨(dú)寫(xiě)三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值璧亚。
-
-
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; }該屬性可能取6個(gè)值濒生，除了auto，其他都與align-items屬性完全一致幔欧。
-
-
