Css3響應布局彈性盒子

彈性盒子（flexbox）

組成：彈性容器（flex container）和彈性子元素（flex item）

<1>彈性容器（flex container）：

display:flex|inline-flex;

內部包含乙個或多個彈性子元素

注意：設定為彈性容器後，子元素的float/clear/vertical-align屬性將失效

屬性

1.flex-direction :

用來指定子元素的主軸方向

屬性值：row | row-reverse | column | column-reverse;

預設值為：row

設定主軸的方向--row為水平方向作為主軸*

flex-direction:row;

設定主軸的方向--column為垂直方向作為主軸

flex-direction:column;*

2. flex-wrap

指定子元素是否換行

屬性值：nowrap | wrap | wrap-reverse

預設為：nowrap

3.flex-flow以上兩個屬性的縮寫

4.justify-content

用於指定主軸上對齊伸縮專案方式

屬性值：flex-start | flex-end | center | space-between | space-around

5.align-items

用於指定側軸上對齊伸縮專案方式

屬性值：flex-start | flex-end | center | baseline | stretch

stretch為拉伸，當子元素高度為auto時，所有子元素會拉伸為同行最大高度。

6align-content

設定側軸上多根軸線的對齊方式

<2>彈性子元素（flex item）

屬性：

1.order

專案流排列順序

屬性值：數值（數值越小排在越前面）

2.flex-grow

專案擴大比例，子元素將完全占用容器可用空間

屬性值：數值，取負值無效

3.flex-shrink

專案縮小比例，空間不足時，子元素將等比縮小

屬性值：數值，取負值無效

4.flex-basis

Css3響應布局 彈性盒子