CSS3 什么是弹性盒子？display属性中flex与box属性值的区别和用法

CSS3弹性盒子是W3C标准化的一种布局模式，核心是通过设置容器的display属性为弹性相关值，让内部子元素可以按照规则自动调整尺寸、对齐方式和排列顺序，大幅简化了传统浮动、定位布局中难以实现的场景，比如容器内元素垂直居中、剩余空间自动分配等需求。

弹性盒子的基础概念

弹性盒子布局包含两个核心角色：弹性容器和弹性子元素。当给一个元素设置display为弹性相关属性值时，这个元素就成为了弹性容器，它的直接子元素会自动成为弹性子元素，不需要额外设置浮动或定位属性。弹性容器默认存在两根轴：水平的主轴和垂直的交叉轴，子元素的排列默认沿主轴方向从左到右排列。

display的box属性值：早期实验性弹性盒子

box是CSS3早期提出的弹性盒子实验性属性值，主要用于旧版本浏览器（比如Firefox旧版本、Safari旧版本）的适配，现在已经被标准属性替代，实际开发中不建议使用。

box的基础用法

使用box需要添加浏览器前缀，设置弹性容器的代码如下：

/* 旧版弹性盒子容器设置 */
.el-box-container {
    display: -webkit-box; /* Safari、Chrome旧版本 */
    display: -moz-box;    /* Firefox旧版本 */
    display: box;         /* 标准实验性写法，已废弃 */
}

box的常用属性

box模式下控制子元素排列和对齐的属性也带有前缀，比如设置子元素排列方向用-webkit-box-orient，分配剩余空间用-webkit-box-flex，示例如下：

.el-box-container {
    display: -webkit-box;
    -webkit-box-orient: horizontal; /* 子元素水平排列，vertical为垂直排列 */
    -webkit-box-align: center;      /* 交叉轴方向居中对齐 */
}
.el-box-item {
    -webkit-box-flex: 1; /* 子元素分配剩余空间，值为1表示等分 */
}

display的flex属性值：标准弹性盒子

flex是W3C正式标准化的弹性盒子属性值，目前所有现代浏览器都支持，是现在开发弹性布局的首选方案。

flex的基础用法

设置flex弹性容器不需要添加浏览器前缀，代码如下：

/* 标准弹性盒子容器设置 */
.el-flex-container {
    display: flex;
}

flex的常用属性

flex模式下有更完善的属性体系，控制主轴方向用flex-direction，控制换行用flex-wrap，控制子元素对齐用justify-content和align-items，示例如下：

.el-flex-container {
    display: flex;
    flex-direction: row;          /* 主轴水平，默认值为row，可选column垂直 */
    flex-wrap: wrap;              /* 子元素超出容器宽度时换行 */
    justify-content: space-between; /* 主轴方向子元素两端对齐，中间等距 */
    align-items: center;          /* 交叉轴方向居中对齐 */
}
.el-flex-item {
    flex: 1 0 200px; /* 子元素分配规则：flex-grow:1可放大，flex-shrink:0不缩小，flex-basis:200px基础宽度 */
}

box与flex的核心区别

二者的主要差异可以从以下几个维度对比：

实际使用建议

现在的前端开发中，除非需要兼容非常老旧的浏览器版本，否则完全不需要使用box属性值，统一使用flex即可。如果需要兼容IE10、IE11这类旧浏览器，可以针对flex的部分属性添加对应的兼容写法，比如display: -ms-flexbox适配IE10+的弹性布局，不需要再回退到box方案。

弹性盒子的核心优势是布局逻辑更符合直觉，比如要实现容器内三个元素水平等分且垂直居中，用flex只需要几行代码就能完成，不需要计算宽度、不需要清除浮动，大大提升了布局效率。

CSS3flexboxdisplay弹性盒子修改时间：2026-06-03 03:24:08