Flexbox 的典型用例

当您想要在一维中布局一系列项目或控制项目之间的间距时，Flexbox 通常是正确的 CSS 布局解决方案。在本指南中，我们将了解 Flexbox 的一些典型用例。

导航的常见模式是将一系列项目显示为水平栏。这可能是 Flexbox 示例中最常见的，可以认为是 Flexbox 的理想用例。

当我们有一组想要水平显示的项目时，我们很可能会遇到额外的空间。我们需要决定如何处理这些空间，并且有一些选择。我们可以在项目外部显示空间——因此在项目之间或周围留出空白——或者我们在项目内部吸收额外的空间，因此需要一种方法来允许项目增长并占用此空间。

为了在项目之间或周围分配空间，我们使用 Flexbox 中的对齐属性以及justify-content 属性。您可以在在弹性容器中对齐项目中阅读有关此属性的更多信息，该属性处理在主轴上对齐项目。

在此示例中，我们以项目的自然大小显示它们，并使用justify-content: space-between 来平均分配项目之间的间距。您可以使用space-around 或space-evenly 值更改空间的分配方式。您还可以使用start 将空间放在项目的末尾，使用end 将其放在项目之前，或使用center 将导航项目居中。

导航的另一种模式是在项目本身内分配可用空间，而不是在项目之间创建空间。flex 属性允许项目根据彼此的比例增长和收缩，如控制沿主轴的弹性项目比例中所述。

如果您希望尊重导航项目的 size 属性，但希望可用空间在它们之间平均分配，您可以使用flex: auto，它是flex: 1 1 auto 的简写——所有项目都从auto 的 flex-basis 增长和收缩。这意味着较长的项目将拥有更多空间，因为它从更大的尺寸开始，即使分配给它的可用空间与其他项目相同。

在下面的实时示例中，尝试将flex: auto 更改为flex: 1。这是flex: 1 1 0 的简写，导致所有项目都具有相同的宽度，因为它们的工作基础是0 的flex-basis，允许所有空间平均分配。

另一种在主轴上对齐项目的方式是使用自动边距。这使得导航栏的设计模式成为可能，其中一组项目左对齐，另一组项目右对齐。这里我们使用的是使用自动边距进行主轴对齐中描述的自动边距技术。

项目在主轴上使用normal对齐，其行为类似于start，因为这是弹性盒的初始行为。gap属性在项目之间创建间隙。并且我们通过为最后一个项目设置margin-left值为auto将其右对齐。您可以将类从一个项目移动到另一个项目以更改分割发生的位置。

开发人员之间一个由来已久的玩笑是，网页设计中最难的问题是垂直居中。使用弹性盒对齐属性，垂直居中内容非常简单，如下面的实时示例所示。

您可以使用对齐方式，使用start将项目对齐到开头，或使用end对齐到结尾。

使用CSS 盒子对齐属性，您可以在没有弹性盒的情况下垂直居中一个元素在另一个元素内部。在上面的示例中，尝试从盒子中删除弹性盒属性并添加align-content: center。然后将margin: auto添加到要水平居中的元素。

无论您使用弹性盒还是网格来布局卡片组件列表，这些布局方法仅适用于弹性盒或网格组件的直接子元素。这意味着，如果您有可变数量的内容，卡片将拉伸到网格区域或弹性盒容器的高度。内部的任何内容都使用常规块级布局，这意味着在内容较少的卡片上，页脚将上升到内容的底部，而不是粘贴到卡片的底部。

弹性盒解决了这个问题。我们使卡片成为一个弹性盒容器，使用flex-direction: column。然后我们将内容区域设置为flex: 1，这是flex: 1 1 0的简写——项目可以从0的弹性基准增长和收缩。由于这是唯一可以增长的项目，它占用弹性盒容器中的所有可用空间并将页脚推到底部。如果您从实时示例中删除flex属性，您将看到页脚向上移动以直接位于内容下方。

媒体对象——一个图像或其他媒体元素与一些描述性文本并排——是网页设计中常见的模式。媒体对象应该能够翻转——将图像从一侧移动到另一侧。

此模式用于评论和其他将图像放置在其描述旁边的地方。我们可以使用弹性盒允许包含图像的媒体对象部分从图像获取其大小信息，而媒体对象的内容则灵活地占用剩余空间。

在此示例中，媒体对象对齐到flex-start，并且.content设置为增长，增长因子设置为1。这些属性与我们上面用于列布局卡片模式的属性相同。

您可能想要在此实时示例中尝试的一些内容与您可能想要在设计中约束媒体对象的不同方式有关。

为了防止图像变得太大，您应该向图像添加max-width。由于媒体对象的该侧使用弹性盒的初始值，它可以收缩，但不能增长，并且使用auto的flex-basis。应用于图像的任何width或max-width都将成为flex-basis。

.image img {
  max-width: 100px;
}

您还可以允许两侧按比例增长和收缩。如果将两侧都设置为flex: 1，它们将从0的flex-basis增长和收缩，因此您最终将得到两列大小相等的列。您可以将内容作为指南并将两者都设置为flex: auto，在这种情况下，它们将从内容的大小或直接应用于弹性盒项目的任何大小（例如图像上的width）增长和收缩。

.media .content {
  flex: 1;
  padding: 10px;
}

.image {
  flex: 1;
}

您还可以为每一侧提供不同的flex-grow因子，例如将带图像的一侧设置为flex: 1，将内容一侧设置为flex: 3。这意味着它们使用0的flex-basis，但根据您分配的flex-grow因子以不同的速率分配该空间。我们用于执行此操作的弹性盒属性在指南控制主轴上弹性盒项目的比率中进行了详细描述。

.media .content {
  flex: 3;
  padding: 10px;
}

.image {
  flex: 1;
}

要切换媒体对象的显示并使图像位于右侧，内容位于左侧，我们将flex-direction属性设置为row-reverse。

在此示例中，我们在media类旁边添加了一个flipped类。从 HTML 中删除该类以查看显示如何更改。

在设置表单控件样式时，弹性盒特别有用。表单有几个小的元素，我们通常希望将它们彼此对齐。一个常见的模式是将<label>和<input>配对与<button>结合使用，也许用于搜索表单或新闻稿注册表单，您希望访问者在其中输入他们的电子邮件地址。

弹性盒使这种类型的布局易于实现。<label>、<input>和<button>包含在一个包装器中，该包装器设置为display: flex。弹性盒属性允许<input>字段增长，而按钮和标签不会增长。文本输入字段将根据可用空间增长和收缩。

像这样的模式可以使为您的设计创建表单元素库变得容易得多，这些库可以轻松容纳添加的其他元素。您通过混合不增长的项目和增长的项目来利用弹性盒的灵活性。

在探索上述模式时，您希望已经开始了解如何思考使用弹性盒实现所需结果的最佳方法。通常您有多个选择。混合不能拉伸的项目和可以拉伸的项目，使用内容来告知大小，或允许弹性盒按比例分配空间。这取决于你。

考虑呈现您拥有内容的最佳方式，然后查看弹性盒或其他布局方法如何帮助您实现它。