CSS Flexbox 中 flex 属性的运用与技巧-JavaScript中文网-JavaScript教程资源分享门户

随着 web 前端技术的发展，CSS Flexbox 已成为制作自适应布局的重要技术之一。其中 flex 属性更是其中的关键，通过设置 flex 属性的值可以实现众多布局效果。在本文中，我们将深入探讨 flex 属性的各种用法与技巧，帮助前端开发者更好地使用 CSS Flexbox。

flex 属性基础用法

flex 属性是定义了一个 flex 项目的长度或者占比。一般有三个值：<flex-grow>、<flex-shrink> 和 <flex-basis>。其中：

flex-grow：该值定义了 flex 项目在剩余空间中所占的比例。例如，当所有 flex 项目的 flex-grow 值均为 1 时，它们将平均占据剩余空间。
flex-shrink：该值定义了 flex 项目在空间不足时所占的比例。例如，当所有 flex 项目的 flex-shrink 值均为 1 时，它们将平均收缩以适应容器宽度变窄的情况。
flex-basis：该值定义了 flex 项目在不进行伸缩时的长度。传入的参数可以是像素值、百分比等。

举个例子，我们可以这样设置一个 flex 项目：

.flex-item {
  flex: 1 1 auto;
}

在这个例子中，设置了 flex-grow: 1，flex-shrink: 1 和 flex-basis: auto。

如果所有 flex 项目的 flex-grow 和 flex-shrink 值都相同，那么它们将平均占据或者收缩以适应剩余空间或者不足空间。但是，我们也可以通过不同的 flex-grow 或者 flex-shrink 值来设计不同的布局效果。

我们可以将一个 flex 项目的 flex-grow 置为较大的数值，如 2 或者 3，而将其他 flex 项目的 flex-grow 置为较小的数值，如 1。这样，较大的数值将占据更多的剩余空间，实现自适应布局的效果。

.flex-item-1 {
  flex: 3 1 auto;
}
.flex-item-2 {
  flex: 1 1 auto;
}

在这个例子中，.flex-item-1 的 flex-grow 值为 3，.flex-item-2 的 flex-grow 值为 1，.flex-item-1 将占据更多的剩余空间。

我们可以将一个 flex 项目的 flex-shrink 值设置为 0，避免它在空间不足时过度压缩。例如，下面的示例中，.flex-item-1 的 flex-shrink 值为 0，不会在空间不足时进行收缩。

.flex-item-1 {
  flex: 1 0 auto;
}
.flex-item-2 {
  flex: 1 1 auto;
}

我们可以将一个 flex 项目的 flex-basis 值设为百分数或者 rem，实现响应式设计。例如，下面的示例中，.flex-item 的 flex-basis 值设为 50%。这样，在容器宽度变化时，它们将自动适应。

.flex-item {
  flex: 1 1 50%;
}

通过灵活运用 flex-grow、flex-shrink 和 flex-basis 这三个属性，我们可以实现丰富多彩的自适应布局。在实际开发中，我们需要根据具体情况灵活运用这些属性，以便实现最佳的布局效果。

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

-- -------------------- ---- -------
--------------- -
  -------- -----
-
------------ -
  ----- - - -----
-
------------ -
  ----- - - -----
-

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64a2642a48841e9894ebf0ee