前言
随着网页应用和网站实现需求的不断增加，web开发从简单的静态网页到丰富的web应用，要满足用户不同的使用习惯和设备，我们经常会遇到一个问题：展示多个元素时，如何控制这些元素不会因为数量过多而导致页面错乱。
现在有了 Flexbox，作为 CSS3 的新特性之一，可以相对简单地解决这个问题。本文将围绕这一主题展开详细介绍。
什么是 Flexbox？
Flexbox，指的是 Flexible Box Layout，即弹性盒子布局。它可以简单地将一个容器中的子元素以一种灵活的方式进行排列。使用它可以方便地实现常见布局，包括水平居中、Vertical Centering、Equal Height Columns等。
Flexbox 有两个部分：容器和项。容器是子项的父级容器，而项则是容器放置的内容。
解决 Flexbox 布局下的换行问题
在 Flexbox 中，默认情况下所有元素将被放置于一行中，当元素超出容器的宽度时，会自动换行。而这样会导致一些排版问题，比如某一个元素占用了两个位置，在后面的子项排在了下一行。
为了解决这个问题，我们可以使用 Flexbox 布局下的 flex-wrap 属性。该属性用于设置子项的排列方式：是否折行及如何折行。
以下是 flex-wrap 属性的三个取值：
nowrap: 默认取值，所有项目会排成一行，如果没有足够的空间，项目可能会溢出容器。wrap: 项目按照可用空间折行排列，第一行在容器的顶部开始排列，第二行排在第一行底部，以此类推。wrap-reverse: 结果与wrap相同，只是第一行在容器的底部开始排列，第二行排在第一行的上部。
下面是 flex-wrap 取值为 wrap 的例子：
-- -------------------- ---- ------- ---- ------------------ ---- ----------------- --------- ---- ----------------- --------- ---- ----------------- ----------- ---- ----------------- ---------- ---- ----------------- ---------- ---- ----------------- --------- ---- ----------------- ----------- ---- ----------------- ----------- ------
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ------ ------ ------- ------ ----------------- ----- ------- ----- ----------- ------- ------------ ------ -
其他 Flexbox 布局技巧
除了 flex-wrap ，Flexbox 布局还有其他一些技巧可以帮助我们更好地控制子项的排列：
justify-content: 控制项目在主轴上的对齐方式（如水平居中、左对齐等），可以取以下值：flex-start、flex-end、center、space-between、space-around。align-items: 控制项目在交叉轴上的对齐方式（如垂直居中、底部对齐等），可以取以下值：flex-start、flex-end、center、baseline、stretch。align-content: 可以控制纵轴上的子项的对齐方式以及对行的间距进行修改（类似于justify-content，但是是垂直方向）。
总结
通过使用 flex-wrap 属性，可以很好地解决 Flexbox 布局下因为元素过多而导致页面排版混乱的问题，同时，我们可以根据实际需求，使用不同的 Flexbox 排版方式，实现更优美、灵活的页面展示。
掌握好 Flexbox 的技巧，可以在实际工程中大大减少排版问题的出现，提升工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2d6f8f6b2d6eab3e2133d