盒子變成彈性盒子

display:flex;

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成

flex容器

flex布局圖

flex六個屬性

1.flex-direction

決定主軸的方向

flex-direction:row | row-reverse | column | column-reverse;

四個值的含義：

row（默認值）:主軸為水平方向，起點在左端
row-reverse:主軸為水平方向，起點在右端
column:主軸為垂直方向，起點在上端
column-reverse:主軸為垂直方向，起點在上端

分別效果對應下圖：

row row-reverse:

column column-reverse:

2.flex-wrap

默認情況下，項目都排在一條線（軸線）上。flex-wrap屬性定義，如果一條線排不下，如何換行。定義如下：

flex-wrap:nowrap|wrap|wrap-reverse;

nowrap(默認):不換行 wrap:換行，第一行在上方 wrap-reverse:換行，第一行在下方

flex-flow

flex-flow屬性是flex-direction和flex-wrap的簡寫形式。默認值為：row nowrap。

justify-content

定義了項目在主軸（X軸）上的對齊方式。

justify-content:flex-start|flex-end|center|space-between|space-around;

效果

align-items

align-items屬性定義項目在交叉軸（Y軸）上如何對齊。

align-items:flex-start|flex-end|center|baseline|stretch;

align-content

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。該屬性定義多根軸線在Y軸上的對齊方式，其六個屬性值：

flex-start:與交叉軸的起點對齊；
flex-end:與交叉軸的終點對齊；
center：與交叉軸的中點對齊；
space-between：與交叉軸的兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。

flex item

這裏需要之一的是：設為Flex布局以後，子元素的float、clear和vertical-align屬性將失效。

flex六個屬性：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。有了這個屬性，可以調整在HTML中出現的順序。

order:<integer>;

flex-grow

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

flex-grow:<number>;

flex-shrink

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

flex-shrink:<number>;

　　如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

flex-basis

flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。類似於設置了width屬性。

flex

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。後兩個屬性可選。

align-self

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

CSS3彈性盒子Flex