介绍

Flexbox是一种在布局中获得更大灵活性并简化响应式布局设计的好方法。它可以轻松地在 2D 平面上对齐元素，并且一旦您熟悉了主要属性，就非常容易使用。

第一步是在容器元素上设置display: flex。弹性容器的子项成为弹性项目。一组属性可以应用于 flex 容器，并作为一个整体对所有项目产生影响，而一组不同的属性可以应用于 flex 项目并对目标项目产生影响。Flex 项目反过来也可以是它包含的元素的 flex 容器，从而可以轻松创建复杂的布局。

浏览器支持： 2020 年的数据显示，全球 98% 的浏览器现在支持 flexbox，而无需供应商前缀。

以下是帮助您一目了然地理解 Flexbox 的快速入门。这不会是所有可用属性、值和边缘情况的详尽列表，而是最有用或最常用属性的快速概述。

弹性容器属性

这是一个包含 3 个span flex 项目的容器，没有 Flexbox：

<div class="box">
  <span class="item">
    <img src="/images/dino.svg" width="64" height="45" alt="Dino Sammy">
  </span>
  <span class="item">
    <img src="/images/steampunk.svg" width="64" height="45" alt="Steampunk Sammy">
  </span>
  <span class="item">
    <img src="/images/skeleton.svg" width="64" height="45" alt="Skeleton Sammy">
  </span>
</div>

显示：弹性

现在，让我们简单地通过在容器上设置display: flex来自动改进它。请注意项目现在如何自动扩展到容器中的可用空间：

.container {
  display: flex;
}

flex-direction

您可以使用flex-direction属性更改项目的方向：

.container {
  display: flex;
  flex-direction: column;
}

默认值为row，其他可用值是row-reverse、column、column-reverse。

row-reverse和column-reverse更改项目的视觉顺序，而不必更改 HTML 标记的顺序：

.container {
  display: flex;
  flex-direction: column-reverse;
}

在行和列方向之间进行更改的能力使得在较小的设备上调整布局变得非常容易，只需在媒体查询中更改一个 CSS 规则即可。

证明内容

使用justify-content对齐主轴上的项目。当 flex-direction 为column时主轴为 Y 轴，当 flex-direction 为row时主轴为 X 轴。

默认值为flex-start，其他可用值是flex-end、center、space-between、space-around和space-evenly。

对齐项目

align-items类似于justify-content，但允许在横轴上对齐项目。它默认为拉伸并接受flex-start、flex-end、center和基线：

对齐内容

align-content类似于align-items，但它只在有不止一行 flex 项目时才有效果（参见下面的 flex-wrap ）。它默认为拉伸并接受flex-start、flex-end、center、space-between、space-evenly：

柔性包装

默认情况下，项目不会换行（默认为nowrap），因此如果项目占用的空间超过可用空间，它们将溢出。这可以通过将flex-wrap设置为wrap值来修复：

弹性项目属性

自我对齐

align-self就像align-items，但仅适用于特定项目。这使得弹性项目很容易违反主要规则：

弹性增长

使用flex-grow我们可以控制一个 flex 项目与其他项目相比所占用的空间量。flex-grow接受一个数值，它代表可用空间的一小部分，这取决于其他项目的 flex-grow 值。它的默认值为 0，这意味着该项目不会占用可用的空白空间。

由于它是基于比例的，例如，将所有项设置为 flex-grow 为 200 与将所有项设置为 flex-grow 为 1 是相同的。

在下面的示例中，第一项的默认 flex-grow 值为 0，第二项的值为 1，第三项的值为 2：

弹性收缩

flex-shrink与flex-grow相反，它定义了项目的可收缩性。它的默认值为 1，这意味着项目可以收缩，并且与 flex-grow 一样，它基于与其他项目的比例。

弹性基础

flex-basis定义了一个项目占用的起始空间，但它不能保证，因为它还取决于空间可用性或是否有额外的空间要填充。

为了说明，在以下示例中，所有项目的 flex-basis 为25%：

…但现在让我们也给第一个 flex 项目一个 flex-grow 1。在以下示例中，所有项目的 flex-basis 为25%，但第一个项目占用剩余的可用空间，因为它的 flex-grow 值为 1：

……最后，这里我们的第三个项目的 flex-basis 为 77%，并且拒绝收缩为其他 flex-basis 为 25% 的项目腾出空间，因为它的flex-shrink值为 0：

.item {
  flex-basis: 25%;
}
.item:last-child {
  flex-basis: 77%;
  flex-shrink: 0;
}

柔性

flex是flex-grow、flex-shrink和flex-basis组合的简写属性。例如，以下是 flex-grow 值为 2、flex-shrink 值为 0 和 flex-basis 值为 2rem 的项目的语法：

.item {
  flex: 2 0 2rem;
}