这是两个新旧的风格。
设置弹性盒子：
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
