flex 基本概念
flex 的核心的概念就是 容器 和 軸宙攻。容器包括外層的 父容器 和內(nèi)層的 子容器，軸包括 主軸 和 交叉軸蠢涝，可以說(shuō) flex 布局的全部特性都構(gòu)建在這兩個(gè)概念上
容器具有這樣的特點(diǎn)：父容器可以統(tǒng)一設(shè)置子容器的排列方式乏苦，子容器也可以單獨(dú)設(shè)置自身的排列方式蛉顽，如果兩者同時(shí)設(shè)置，以子容器的設(shè)置為準(zhǔn)矾端。
任何一個(gè)容器都可以指定為 Flex 布局掏击。
.box{
display: flex;
}
行內(nèi)元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}
注意：設(shè)為 Flex 布局以后秩铆，子元素的float砚亭、clear和vertical-align屬性將失效。
1. 父容器
-
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)在下沿愧沟。
-
justify-content 屬性用于定義如何沿著主軸方向排列子容器蔬咬。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start：起始端對(duì)齊
flex-end：末尾段對(duì)齊
center：居中對(duì)齊
space-around：子容器沿主軸均勻分布，位于首尾兩端的子容器到父容器的距離是子容器間距的一半
space-between：子容器沿主軸均勻分布沐寺，位于首尾兩端的子容器與父容器相切林艘。
-
align-items 屬性用于定義如何沿著交叉軸方向分配子容器的間距。
.box {
align-items: flex-start | flex-end | center | baseline | 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è)交叉軸。
-
align-content屬性定義了多根軸線的對(duì)齊方式微酬。如果項(xiàng)目只有一根軸線绘趋，該屬性不起作用。
.box {
align-content: 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è)交叉軸。
-
flex-wrap：設(shè)置換行方式：
默認(rèn)情況下梗逮，項(xiàng)目都排在一條線（又稱"軸線"）上项秉。flex-wrap屬性定義，如果一條軸線排不下慷彤，如何換行
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
-
flex-flow：是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式娄蔼，默認(rèn)值為row nowrap怖喻。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
2. 子項(xiàng)目
-
order：定義項(xiàng)目的排列順序。數(shù)值越小岁诉，排列越靠前锚沸，默認(rèn)為0。
.son {
order: 2; /* default 0 */
}
-
flex-grow：定義項(xiàng)目的放大比例涕癣，默認(rèn)為0哗蜈，即如果存在剩余空間，也不放大坠韩。
.son {
flex-grow: 2; /* default 0 */
}
tips：如果所有項(xiàng)目的flex-grow屬性都為1距潘，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的 flex- grow屬性為2只搁，其他項(xiàng)目都為1音比，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。
-
flex-shrink：定義了項(xiàng)目的縮小比例氢惋，默認(rèn)為1洞翩，即如果空間不足，該項(xiàng)目將縮小焰望。
.son {
flex-shrink: 1; /* default 1 */
}
tips：如果所有項(xiàng)目的flex-shrink屬性都為1骚亿，當(dāng)空間不足時(shí)，都將等比例縮小熊赖。如果一個(gè)項(xiàng)目的flex-shrink
屬性為0来屠，其他項(xiàng)目都為1，則空間不足時(shí)秫舌，前者不縮小的妖。 負(fù)值對(duì)該屬性無(wú)效绣檬。
-
flex-basis：定義了在分配多余空間之前足陨，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性娇未，計(jì)算主軸是否有多余空間墨缘。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小零抬。
.son {
flex-basis: 100px | auto; /* default auto */
}
tips：它可以設(shè)為跟width或height屬性一樣的值（比如100px）镊讼，則項(xiàng)目將占據(jù)固定空間。
-
flex：flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫平夜，默認(rèn)值為0 1 auto蝶棋。后兩個(gè)屬性可選。
.son{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
tips：該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)忽妒。建議優(yōu)先使用這個(gè)屬性玩裙，而不是單獨(dú)寫三個(gè)
分離的屬性兼贸，因?yàn)闉g覽器會(huì)推算相關(guān)值
-
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;
}
