Flexbox 容器和项目

Flexbox 或灵活框是一种以可预测的方式在页面上排列内容的布局方法。Flexbox 提供了一种改进，优于传统的块模型定位，使用浮动或甚至表格定位页面上的内容。

从本质上讲，Flexbox 可以分解为父元素（flex 容器）和子元素（flex 项）。

Flex 容器

可以通过将其 display 属性设置为 flex 来创建 Flex 容器：

.container {
  display: flex;
}

Flex 项目

Flex 容器的每个子元素都变为 flex 项。然后，这些弹性项可以接收其他属性，以修改其在页面上的定位方式。

.item {
  flex: 1;
}

flex: 1 属性是 flex-grow: 1 的简写，使其能够相对于容器内的兄弟姐妹成长。

将这些放在一起就是 HTML 标记：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>