css3移动端flex弹性盒子布局

 

这是两个新旧的风格。

设置弹性盒子： 

display: -webkit-box;(-webkit-box-flex,-webkit-box-orient:vertical,-webkit-box-align和-webkit-box-pack)

display: -webkit-flex;(-webkit-flex,-webkit-flex-flow:column,-webkit-align-items: center,-webkit-justify-content: center;)

 

 

设置垂直排列：

 -webkit-box-orient: vertical;

 -webkit-flex-flow: column;
 

设置flex：flex决定了占的宽或高的比例

 -webkit-box-flex: 1;
 -webkit-flex: 1;

确定子元素的排列顺序：是正常顺序还是反排顺序：

box-direction：normal ||  reverse

盒子内部剩余空间如何使用：

水平方向： -webkit-box-align: start || end || center || baseline || stretch(默认)

其中stretch为默认值，为拉伸，也就是父标签高度过高，其孩子元素的高度就多高，以后等高布局不用愁了。start表示顶边对齐，end为底部对齐，center为居中对齐，baseline表示基线（英文字母o,m,n等的底边位置线）对齐。

竖直方向：-webkit-box-pack:start || end || center || justify

就大部分的行为表现来说分别对应text-align属性的值：left | right | center | justify；

 

-webkit-align-items: flex-start,flex-end,center

-webkit-justify-content:flex-start,flex-end,center