Flexbox 是一种可靠、灵活且响应式的 web 布局方式。但是，如果你不熟悉它可以很容易地遇到一些布局问题。其中一个问题是内容可能会被截断或溢出其容器边界。本指南将介绍如何使用 flex-wrap 属性来解决这个问题。
什么是 flex-wrap？
默认情况下，Flexbox 中的行和列都是排成一行或一列的。当内容超过了容器的宽度或高度时，内容将被截断或溢出。为了解决这个问题，我们需要让 Flex 容器在必要时换行，从而使内容合理分配。
这就是 flex-wrap 属性派上用场的地方。该属性可控制是否允许 Flex 容器的项目换行，并设置新行或列的方式。
下面是一个基本示例：
.container {
display: flex;
flex-wrap: wrap;
}在上述示例中，我们将 flex-wrap 设置为 wrap，这意味着当容器中的项目不能适应单个行或列时，它们将被转移到新的一行或列中。这将有助于避免内容截断。
如何避免内容截断
让我们看一个具体的例子：一个包含多个水平列表项的 Flexbox 容器。如果每个列表项都非常宽，容器的宽度可能会不够。此时，为了避免列表项被截断，我们可以将 flex-wrap 设置为 wrap：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------- ------ -- -------------------- -- - ----- - ----------- ------ -- ---------- -- ------------- ----- -- -------- -- -
在上面的示例中，我们使用 flex-wrap: wrap，并将每个项目的基础宽度设置为 200px 和 margin-right: 20px，这样每行就可以容纳三个项目，避免内容截断。
使用 flex-shrink
但是，当容器的宽度缩小到一定程度时，即使开启换行，也会出现内容溢出的问题。这时我们可以使用 flex-shrink 属性来解决这个问题。flex-shrink 属性指定项目在必要时缩小的量，越小则缩小的比例就越小。
例如，在上面的示例中，我们可以将 flex-shrink 的值设置为 1 来自动调整容器的大小:
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------- ------ -- -------------------- -- - ----- - ----------- ------ -- ---------- -- ------------- ----- -- -------- -- ------------ -- -- ---------------- -- -
在上述示例中，当窗口变窄时，项目会调整宽度并适应容器，从而避免内容截断或溢出问题。
总结
flex-wrap 和 flex-shrink 都是非常有用的 CSS Flexbox 属性，使得我们可以很容易地控制网页布局。使用这些属性，我们可以避免内容被截
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6529c8c77d4982a6ebc31abe