简介：flex 是一个CSS的display 属性中新添加一个值。 随着inline-flex的使用，它将使它适用的元素成为一个flex container（伸缩容器），而这个元素的每个子元素将成为 flex item（伸缩项目）。
伸缩项目将参与到flex布局中，所有由CSS Flexible Box Layout Module（CSS伸缩盒布局模型）定义的属性都能被它们使用
主轴:默认情况下，主轴是x轴，侧轴是y轴，项目则排列在主轴方向上
flex 属性是flex-grow, flex-shrink 和 flex-basis 属性的简写。
参考文章 Flex布局教程
flex布局新、旧版属性对比
| 作用于 | 属性 | 新版flex | 旧版flex | 备注 |
|---|---|---|---|---|
| 容器上 | 语法 | display:-webkit-flex/flex | display:-webkit-box | / |
| 容器上 | 主轴 方向 |
flex-direction: row/row-reverse column/column-reverse |
-webkit-box-orient: horizonal/vertical -webkit-box-direction: normal/reverse |
主轴：x轴/y轴 侧轴：与主轴垂直的另外一轴 |
| 容器上 | 主轴 对齐 方式 |
justify-content: flex-start/flex-end/center space-between/space-around |
-webkit-box-pack: start/end/center/justify |
富余空间：取值为flex-start或start时 富余空间在主轴的正方向上 取值为flex-end或end时 富余空间在主轴的反方向上 |
| 容器上 | 侧轴 对齐 方式 |
align-items: flex-start/flex-end center/baseline/strech |
-webkit-box-align: start/end/center |
富余空间：取值为flex-start或start时 富余空间在主轴的正方向上 取值为flex-end或end时 富余空间在主轴的反方向上 |
| 项目上 | 富余 空间 |
flex-grow:0/1/auto | -webkit-box-flex:0/1 | flex-grow定义项目的放大比例 |
新版flex新增特性
| 作用于 | 属性 | 备注 |
|---|---|---|
| 容器上 | flex-wrap:nowrap/warp/wrap-reverse | 默认单行排列，宽度压缩时项目缩小 取值非nowrap时，即是拥有侧轴方向 wrap 侧轴正方向 wrap-reverse 侧轴反方向 |
| 容器上 | align-content:start/end/center/space-between/space-around-strech | 多行对齐时的整体堆砌方式 |
| 容器上 | flex-grow:flex-direction+flex-wrap | 决定着主轴、侧轴的方向 |
| 项目上 | order:number | 给项目标记数字，控制项目顺序 |
| 项目上 | align-self: auto/start/end/center/space-between/space-around-strech | 除去容器的align-items的设定，只管理自身的侧轴对齐方式 |
| 项目上 | flow-basis:auto/0/1/auto flex-shrink:1/0/auto |
flex-basis属性定义了在分配多余空间之前， 项目占据的主轴空间（main size） 它可以设为跟width或height属性一样的值， 将项目占据固定空间 flex-shrink定义项目的缩小比例 |
等宽布局
.wrapper {
width:300px;
height:300px;
display:flex;
justify-content:flex-start;
}
.innerBox {
height:50px;
flex-shrink:1 /*无效设定，不考虑*/
flex-grow:1;
flex-basis:0%;
}