display:box 属性

一、作用

在元素上设置该属性,可使其子代排列在同一水平上,类似 display:inlineblock;。
目前 box-flex 属性还没有得到 firefox、 Opera、 chrome 浏览器的完全支
持 , 但 可 以 使 用 它 们 的 私 有 属 性 定 义 firefox(-moz-) 、 opera(-o-) 、
chrome/safari(-webkit-)。

二、可在其子代设置如下属性

前提:使用如下属性,必须在父代设置 display:box;

0x1 box-flex

可能的值为 n(数字)。
- 占父级元素宽度的 n 份
- 若子元素设置固定宽度,则该子元素应用固定宽度,其他未设置固定宽度的字元素将余下的父级宽度(父级-已设置固定宽度的子代元素的总宽度按 n 占份数
- 若子元素有 margin 值,则按余下(父级宽度-子代固定总宽度-总 margin 值)宽度占 n 份

0x2 box-orient

可能的值: horizontal | vertical | inline-axis | block-axis | inherit
- horizontal 在水平行中从左向右排列子元素。
- vertical 从上向下垂直排列子元素。
- inline-axis 沿着行内轴来排列子元素(映射为 horizontal)。
- block-axis 沿着块轴来排列子元素(映射为 vertical)。
- inherit 应该从父元素继承 box-orient 属性的值。

0x3 box-direction

可能的值:normal|reverse|inherit
- normal以默认方向显示子元素。
- reverse 以反方向显示子元素。
- inherit 应该从子元素继承 box-direction 属性的值

0x4 box-align

可能的值:start|end|center|baseline|stretch
在父级设置,子代的垂直对齐方式:
- start 垂直顶部对齐
- end 垂直底部对齐
- center 垂直居中对齐
- stretch 拉伸子代的高度,与父级设置的高度一致。子代 height
无效。
baseline 如果 box-orient 是 inline-axis 或 horizontal,所有子元素均与其基线对齐。

0x5 box-pack

可能的值:start|end|center|justify;
在父级设置,子代的水平对齐方式。
- start 水平左对齐
- end 水平右对齐
- center 水平居中对齐
- justify 在每个子元素之间分割多余的空间(首个子元素前和最
后一个子元素后没有多余的空间)。

三、兼容性

目前没有浏览器支持以上的属性。
但是需要加上前缀的,以 box-flex 为例:
Firefox 支持替代的 -moz-box-flex 属性。
Safari、 Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

猜你喜欢

转载自blog.csdn.net/geekmubai/article/details/81154201