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