CSS弹性盒子（详细版，建议收藏）

弹性盒子（Flexible Box，Flexbox）是CSS3的一种新布局模式，主要是用来提供一种更灵活的方式来对容器中的条目进行排列、对齐和分配空间。

弹性盒子由弹性容器和弹性子项组成。弹性容器是通过设置 display 属性为 flex 或 inline-flex 创建的。弹性子项是其直接子元素。

以下是创建一个基本的弹性盒子的示例代码：

.container {
  display: flex; /* 或者 inline-flex */
  flex-direction: row; /* 容器内条目的排列方向 */
  justify-content: flex-start; /* 水平方向上的对齐方式 */
  align-items: center; /* 垂直方向上的对齐方式 */
}
 
.item {
  /* 子项样式 */
}

<div class="container">
  <div class="item">条目 1</div>
  <div class="item">条目 2</div>
  <div class="item">条目 3</div>
</div>

弹性盒子模型具有以下特性：

1. 弹性布局是一个灵活的二维布局模型。
2. 弹性容器内的子项可以在任何方向排列。
3. 子项可以设置为弹性宽度或弹性高度，以便它们可以根据容器大小自动调整。
4. 子项可以自动填充剩余空间，或者通过特定的属性设置为固定大小或比例。
5. 子项可以很容易地在容器内沿任何方向排列。

弹性盒子是创建复杂响应式布局的强大工具，并且得到了所有现代浏览器的支持。