Flex 布局
標簽（空格分隔）： flex css
Flex:
Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex布局。容器分為兩種,塊flex和行內flex.
.box{
display:flex;/*webkit需要加前綴*/
/*display:inline-flex;*/
}Flex布局有兩層,采用flex布局的元素稱為flex容器,其子元素則自動成flex item,即項目.
注:flex不同於block,flex容器的子元素的float,clear,vertical-align屬性將失效.
Flex布局:
flex容器有兩根軸:水平主軸就是x軸(main axis)和豎直軸也是y軸(cross axis),兩軸相關位置標識如下:
flex容器屬性:
flex-direction:決定項目的排列方向。
flex-wrap:即一條軸線排不下時如何換行。
flex-flow:是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
justify-content:定義了項目在主軸上的對齊方式。(justify)
align-items:定義項目在交叉軸上如何對齊。
align-content:定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。(換行會產生多軸)
Flex item屬性:
order:定義項目的排列順序。數值越小，排列越靠前，默認為0。
flex-grow:定義項目的放大比例,如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。
flex-shrink:定義了項目的縮小比例，默認為1，如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
flex-basis:定義了在分配多余空間之前，項目占據的主軸空間（main size）。
flex:是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
align-self:允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。