flex伸縮盒子：

在父盒子中設置display： flex；子盒子中分別設置flex： 1，按比例設置flex屬性值。

其他屬性如下：

1、flex-grow：<number> // 用數值來定義擴展比率。不允許負值

2、flex-shrink：<number> // 用數值來定義收縮比率。不允許負值

3、flex-basis：<length> | <percentage> // 設置或檢索彈性盒伸縮基準值。

4、flex-flow：<‘ flex-direction ‘> || <‘ flex-wrap ‘> // 復合屬性。設置或檢索彈性盒模型對象的子元素排列方式。

5、flex-direction：row | row-reverse | column | column-reverse // 該屬性通過定義flex容器的主軸方向來決定felx子項在flex容器中的位置。這將決定flex需要如何進行排列。取值row：主軸與行內軸方向作為默認的書寫模式。即橫向從左到右排列（左對齊）。row-reverse：對齊方式與row相反。column：主軸與塊軸方向作為默認的書寫模式。即縱向從上往下排列（頂對齊）。column-reverse：對齊方式與column相反。

6、flex-wrap：nowrap | wrap | wrap-reverse // 該屬性控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。nowrap：flex容器為單行。該情況下flex子項可能會溢出容器wrap：flex容器為多行。該情況下flex子項溢出的部分會被放置到新行，子項內部會發生斷行wrap-reverse：反轉 wrap 排列。

7、align-content：flex-start | flex-end | center | space-between | space-around | stretch // 當伸縮容器的側軸還有多余空間時，本屬性可以用來調準「伸縮行」在伸縮容器裏的對齊方式，這與調準伸縮項目在主軸上對齊方式的 <‘ justify-content ‘> 屬性類似。請註意本屬性在只有一行的伸縮容器上沒有效果。

...........

參考來源： http://www.css88.com/book/css/properties/flex/align-items.html

CSS3中flex伸縮盒子的使用