这也是弹性布局的一种,原理相同,只是针对不同的浏览器支持
语法
display: -webkit-box;//safari、chrome、Opera
display: -moz-box; //ff
display: box;// W3C标准
属性
box-orient
定义主轴方向
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
- horizantal 水平
- vertical 垂直
- inline-axis 沿着行内轴来排列子元素(映射为 horizontal)。
- block-axis 沿着块轴来排列子元素(映射为 vertical)。
- inherit 继承父元素的此属性
兼容写法
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
box-pack
定义了子元素在主轴上的排列方式
box-pack: start | end | center | justify
- start 起点对齐
- end 终点对齐
- center 居中对齐
- justify 两端对齐
兼容写法:
-webkit-box-pack: start;
-moz-box-pack: start;
box-pack: start;
box-align
定义子元素在交叉轴上的排列方式
box-align: start | end | center | baseline | stretch;
- start 起点
- end 终点
- center 居中
- baseline 基线对齐
- stretch 拉伸子元素填满父元素
-webkit-box-align: end;
-moz-box-align: end;
box-align: end;
box-direction
定义子元素的排列方式,默认为从左至右,从上至下
box-direction: normal | reverse | inherit;
- normal 默认方向
- reverse 反转方向
Inherit 继承
兼容写法
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
box-ordinal-group
定义子元素的显示顺序
box-ordinal-group: integer;
值越低显示在越前,当分组值相同时,按照书写顺序
兼容写法
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
box-flex
定义子元素相对于其他子元素的伸缩比例
box-flex: value;
兼容写法
-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2;
box-flex-group
用于向柔性分组分配可伸缩元素,
暂不支持
box-lines
定义了列如果超出了父框中的空间,是否要换行显示
暂不支持
box-lines: single|multiple;