display：box 属性

秒速五厘米 2022-05-19 07:04 301阅读 0赞

## 一、作用 ##

在元素上设置该属性，可使其子代排列在同一水平上，类似 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 属性。