display:flex;
Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性最岗。
注意帕胆，設為 Flex 布局以后，子元素的float般渡、clear和vertical-align屬性將失效
一懒豹、flex容器的屬性：
1.flex-direction:決定主軸的方向（即項目的排列方向）
.box{
? ? ? flex-direction: row | row-reverse | column | column-reverse;
}
2.flex-wrap:默認情況下，項目都排在一條線（又稱"軸線"）上驯用。flex-wrap屬性定義脸秽，如果一條軸線排不下，如何換行.
.box
{
? ? flex-wrap: nowrap | wrap | wrap-reverse;
}
不換行/換行蝴乔，第一行在上面/換行记餐，第一行在下面
3.flex-flow：是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap
4.justify-content：定義了項目在主軸上的對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around;
space-around：每個項目兩側的間隔相等薇正。所以片酝，項目之間的間隔比項目與邊框的間隔大一倍
5.align-items：定義項目在交叉軸上如何對齊
align-items: flex-start | flex-end | center | baseline | stretch;
起點對齊/終點對齊/中點對齊/項目的第一行文字的基線對齊/如果項目未設置高度或設為auto，將占滿整個容器的高度
6.align-content:定義了多根軸線的對齊方式挖腰。如果項目只有一根軸線雕沿，該屬性不起作用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
二、項目的屬性
order/flex-grow/flex-shrink/flex-basis/flex/align-self
1.order：定義項目的排列順序猴仑。數(shù)值越小审轮，排列越靠前，默認為0辽俗，可正可負的整數(shù)
2.flex-grow：定義項目的放大比例疾渣，默認為0，即如果存在剩余空間崖飘，也不放大
.item {flex-grow:<number>;/* default 0 */}
3.flex-shrink：定義了項目的縮小比例稳衬，默認為1，即如果空間不足坐漏，該項目將縮斜【巍；設為0時赊琳，不縮薪重病；
4.flex-basis：定義了在分配多余空間之前躏筏，項目占據(jù)的主軸空間（main size）板丽。
.item {flex-basis:<length> | auto;/* default auto */}
5.flex：是flex-grow,?flex-shrink?和?flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選埃碱。
該屬性有兩個快捷值：auto?(1 1 auto) 和 none (0 0 auto)猖辫。
6.align-self：允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性砚殿。默認值為auto啃憎，表示繼承父元素的align-items屬性，如果沒有父元素似炎，則等同于stretch辛萍。
