定義：Flex (Flexible Box) 彈性布局
.box{
display:flex;
}
.box{
display: inline-flex;
}
.box{
display: -webkit-flex;
display: flex;
}
注意梢薪，設(shè)為 Flex 布局以后，子元素的float蒂胞、clear和vertical-align屬性將失效基公。
基本語法
采用flex的元素，稱為“容器”腰素，子元素稱為“項目”
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）聘裁。主軸的開始位置（與邊框的交叉點）叫做main start，結(jié)束位置叫做main end弓千；交叉軸的開始位置叫做cross start衡便，結(jié)束位置叫做cross end。
設(shè)置屬性
flex-direction:
flex-direction屬性決定主軸的方向（即項目的排列方向）洋访。
.box{
flex-direction: row|row-reverse|column|column-reverse;
}
row（默認(rèn)值）：主軸為水平方向镣陕，起點在左端。
row-reverse：主軸為水平方向姻政，起點在右端呆抑。
column：主軸為垂直方向，起點在上沿汁展。
column-reverse：主軸為垂直方向鹊碍，起點在下沿。
flex-wrap:
flex-wrap決定一行的元素排滿之后如何進行換行
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap（默認(rèn)）：不換行食绿。
wrap：換行侈咕，第一行在上方。
wrap-reverse：換行器紧，第一行在下方耀销。
flex-flow:
flex-flow是flex-direction和flex-wrap的簡寫
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content:
justify-content是決定項目在主軸上的對齊方式
.box{
justify-content: flex-start|flex-end|center|space-around|space-bwtween;
}
flex-start（默認(rèn)值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等铲汪。
space-around：每個項目兩側(cè)的間隔相等熊尉。所以，項目之間的間隔比項目與邊框的間隔大一倍桥状。
align-items:
align-items屬性定義在交叉軸上的項目的對齊方式
.box{
align-items: flex-start|flex-end|center|baseline|stretch;
}
flex-start：交叉軸的起點對齊帽揪。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊辅斟。
baseline: 項目的第一行文字的基線對齊。
stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto芦拿，將占滿整個容器的高度士飒。
align-content:
align-content定義了交叉軸上存在多個軸線的對齊方式查邢，當(dāng)只有一根軸線的時候，該屬性不起作用
.box{
align-content: flex-start| flex-end | center | space-between| space-around | stretch;
}
flex-start：與交叉軸的起點對齊酵幕。
flex-end：與交叉軸的終點對齊扰藕。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊芳撒，軸線之間的間隔平均分布邓深。
space-around：每根軸線兩側(cè)的間隔都相等。所以笔刹，軸線之間的間隔比軸線與邊框的間隔大一倍芥备。
stretch（默認(rèn)值）：軸線占滿整個交叉軸。
針對內(nèi)部的項目設(shè)置的屬性
order:
order屬性定義該項目的排列順序舌菜，數(shù)字越小越靠前萌壳，默認(rèn)為0
.item{
order: 整數(shù);
}
flex-grow:
flex-grow定義項目的放大比例，默認(rèn)為0日月，即如果存在剩余空間袱瓮，也不放大。
.item{
flex-grow: 整數(shù);
}
flex-shrink:
flex-shrink定義項目縮小的比例爱咬，默認(rèn)為1尺借，即如果空間不足，該項目將縮小精拟。
.item{
flex-shrink: 整數(shù);
}
如果其他item的flex-shrink為1褐望，有一個item的shrink為0，則該item不縮小串前。
flex-basis:
flex-basis定義了在分配多余空間之前瘫里，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性荡碾，計算主軸是否有多余空間谨读。它的默認(rèn)值為auto，即項目的本來大小坛吁。
.item{
flex-basis: 整數(shù) | auto;
}
它可以設(shè)為跟width或height屬性一樣的值劳殖，則項目將占據(jù)固定空間(當(dāng)設(shè)置flex-grow的時候還是會按照剩余空間進行縮放)。
flex:
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫拨脉，默認(rèn)值為0 1 auto哆姻。后兩個屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)玫膀。
align-self:
align-self允許單個項目有與其他項目不一樣的對齊方式矛缨，可覆蓋align-items屬性，默認(rèn)值為auto，表示繼承父元素的align-items屬性箕昭，如果沒有父元素灵妨，則等同于stretch。
.item{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
