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