Flexbox 简介

CSS3 中引入的 Flexbox（灵活框）布局提供了一种更有效的方法，可以在容器元素（flex container）中的子元素（flex items）之间布局，对齐和分配空间。最重要的是，即使它们的尺寸未知或动态，因此称为弯曲或柔性。

让我们从基础开始，看看如何将容器初始化为 flex。

考虑以下标记：

<div class="flex-container">
  <div class="flex-item-1"></div>
  <div class="flex-item-2"></div>
  <div class="flex-item-3"></div>
</div>

只需使用 display: flex 即可初始化 flexbox。完成！

.flex-container {
  height: 100px;
  padding: 10px;
  background: grey;

  display: flex; // or display: inline-flex;
}

现在 Flex 容器已经准备好了，让我们玩它的 flex 项目，给它们每个宽度 25％，并在它们的父容器内水平居中对齐 flex 项目。

.flex-item-1 {
  width: 25%;
  background: green;
}

.flex-item-2 {
  width: 25%;
  background: purple;
}

.flex-item-3 {
  width: 25%;
  background: pink;
}

请注意，我特意给了 3 个孩子，每个孩子的宽度为 25％，以显示在弹性箱内移动孩子是多么容易。

现在，当我们运行上面的代码时，我们应该看到容器中的 3 个子项水平地彼此相邻。这是因为默认情况下，flexbox 具有 flex-direction: row 属性。默认情况下，弹性项目将彼此水平对齐。右边应该有一个间隙，因为孩子的总宽度没有加起来达到 100％。

现在尝试将属性 justify-content: center 添加到 flex-container。

.flex-container {
  ...
  justify-content: center;
}

结果是孩子们水平居中对齐。同一属性还有其他值，例如 flex-end（右对齐），space-around（项目周围的空间相等），space-between（项目之间的空格相等）。

重要事项：其他块元素属性（如 text-align: center 等）对 flex 元素没有影响。