一、Flex布局是什么？
Flex是Flexible Box的縮寫烤黍，意為"彈性布局"续担，用來為盒狀模型提供最大的靈活性擅耽。任何一個(gè)容器都可以指定為Flex布局。
- 任何一個(gè)容器都可以指定為Flex布局物遇。
.box{
display:flex;
}
- inline元素也可以用
.box{
display:inline-flex;
}
- webkit內(nèi)核瀏覽器加上-webkit前綴
.box{
display:-webkit-flex;
}
注意乖仇，設(shè)為Flex布局以后，子元素的float询兴、clear和vertical-align屬性將失效乃沙。
二、基本概念
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）诗舰。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start警儒，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start眶根，結(jié)束位置叫做cross end蜀铲。
項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size属百，占據(jù)的交叉軸空間叫做cross size记劝。
三、容器的屬性
- 以下6個(gè)屬性設(shè)置在容器上诸老。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
3.1 flex-direction屬性:決定主軸的方向（即項(xiàng)目的排列方向）
.box {
flex-direction: column-reverse | column | row | row-reverse;
} //對(duì)應(yīng)于下圖的4種排序狀態(tài)
3.2 flex-wrap屬性
默認(rèn)情況下隆夯，項(xiàng)目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義别伏，如果一條軸線排不下蹄衷，如何換行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三個(gè)值厘肮。
1.nowrap（默認(rèn)）：不換行愧口。
image.png
2.wrap：換行，第一行在上方类茂。
image.png
3.wrap-reverse：換行耍属，第一行在下方
image.png
3.3 flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap巩检。
3.4 justify-content屬性
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式厚骗。
.box {
justify-content:flex-start | flex-end | center | space-between | space-around;
}
3.5 align-items屬性
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
3.6 align-content屬性
align-content屬性定義了多根軸線的對(duì)齊方式兢哭。如果項(xiàng)目只有一根軸線领舰，該屬性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
四、項(xiàng)目的屬性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
4.1 order屬性
order屬性定義項(xiàng)目的排列順序冲秽。數(shù)值越小舍咖，排列越靠前，默認(rèn)為0锉桑。
.item {
order: <integer>;
}
4.2 flex-grow屬性
flex-grow屬性定義項(xiàng)目的放大比例排霉，默認(rèn)為0，即如果存在剩余空間民轴，也不放大攻柠。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）杉武。如果一個(gè)項(xiàng)目的flex-grow屬性為2辙诞，其他項(xiàng)目都為1辙售，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍轻抱。
4.3 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ì)該屬性無效醋虏。
4.4 flex-basis屬性
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）哮翘。瀏覽器根據(jù)這個(gè)屬性颈嚼，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto饭寺，即項(xiàng)目的本來大小阻课。
.item {
flex-basis: <length> | auto; /* default auto */
}//它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間艰匙。
4.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覽器會(huì)推算相關(guān)值硕舆。
4.6 align-self屬性
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式秽荞，可覆蓋align-items屬性。默認(rèn)值為auto抚官，表示繼承父元素的align-items屬性扬跋，如果沒有父元素，則等同于stretch凌节。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
