CSS3 弹性布局：display: box vs. flexbox vs. flex

在本文中，我们将介绍 CSS3 弹性布局这一主题，并对 display: box、flexbox 和 flex 这三种方式进行详细说明和比较。

阅读更多：CSS 教程

display: box

display: box 是 CSS3 引入的一种旧的弹性布局方式，也称为弹性盒子布局。它通过将容器设置为 display: box，以及通过一些属性值来控制子元素的布局方式。

下面是一个使用 display: box 实现两栏布局的示例代码：

<style>
.container {
  display: box;
  box-orient: horizontal;
}

.side {
  width: 200px;
}

.content {
  flex: 1;
}
</style>

<div class="container">
  <div class="side">侧栏</div>
  <div class="content">主内容</div>
</div>

在上面的示例中，我们通过设置容器的 display 属性为 box，然后使用 box-orient 属性来指定子元素的布局方向为水平（horizontal）。接着，我们设置了侧栏的宽度为 200px，并使用 flex: 1 来使主内容自适应剩余空间。

然而，display: box 的兼容性并不好，目前主流浏览器对其支持较差，已经不推荐使用。

flexbox

flexbox 是 CSS3 引入的另一种弹性布局方式，也称为弹性盒子布局。它通过将容器设置为 display: flex，并使用一些属性值来控制子元素的布局方式。

下面是一个使用 flexbox 实现两栏布局的示例代码：

<style>
.container {
  display: flex;
}

.side {
  width: 200px;
}

.content {
  flex: 1;
}
</style>

<div class="container">
  <div class="side">侧栏</div>
  <div class="content">主内容</div>
</div>

在上面的示例中，我们通过设置容器的 display 属性为 flex，然后设置侧栏的宽度为 200px，并使用 flex: 1 来使主内容自适应剩余空间。

flexbox 布局相对于 display: box，具有更好的兼容性并且更加强大灵活。它能够处理更复杂的布局需求，并且提供了更多的属性和值来控制子元素的布局方式。

flex

flex 是 flexbox 布局的最简化的写法，也是最新的语法。它通过将容器设置为 display: flex，并使用一些属性值来控制子元素的布局方式。

下面是一个使用 flex 实现两栏布局的示例代码：

<style>
.container {
  display: flex;
}

.side {
  width: 200px;
}

.content {
  flex: 1;
}
</style>

<div class="container">
  <div class="side">侧栏</div>
  <div class="content">主内容</div>
</div>

在上面的示例中，我们同样通过设置容器的 display 属性为 flex，然后设置侧栏的宽度为 200px，并使用 flex: 1 来使主内容自适应剩余空间。

flex 是 flexbox 的推荐写法，与 flexbox 完全兼容并且语法更加简洁。

总结

在本文中，我们介绍了 CSS3 弹性布局这一话题，并比较了 display: box、flexbox 和 flex 这三种方式。其中，display: box 是一种旧的弹性盒子布局，但兼容性较差，目前不推荐使用。flexbox 是一种弹性盒子布局，具有良好的兼容性和灵活性，是目前比较常用的弹性布局方式。而 flex 是 flexbox 的最新语法，与 flexbox 完全兼容，并且更加简洁。根据具体的需求和兼容性要求，我们可以选择适合自己的布局方式来实现页面的布局和设计。