一、flex wrap 间距
当我们使用flex-wrap属性控制flex容器中的flex子项如何换行时，一些开发者可能会发现一些空隙出现在行的结尾处。这个问题很容易解决：如果您使用的是 justify-content: space-between或 justify-content: space-around，那么这些空隙不难出现。
这是因为，当我们使用flex容器进行换行时，space-between和space-around会在各行之间创建空隙，而这些空隙通常会感到比较明显，使得子项之间产生了一些不必要的距离。
要解决这个问题，您只需使用justify-content属性的 center，flex-start 或 flex-end 值就好了，它们不会创建额外的空隙。
.container {
display: flex;
flex-wrap: wrap;
justify-content: center; /* center, flex-start 或 flex-end */
}
二、flex-wrap前端作用
flex-wrap属性确定flex子项是否被包装到所在的行或容器中，并指定换行过程中如何处理flex子项与相邻时的空间。
默认地， flex子项比容器宽，因此，如果flex子项之和大于容器，则剩余的所有flex子项将被放在新的行中。
我们可以使用处理空白间隔、处理单行和处理多行三种方式指定在flex容器中的元素如何进行换行。
三、flex wrap不起作用
对于某些开发者来说，当他们尝试设置flex容器的flex-wrap属性时，发现设置无效。这是由于另一个 CSS 属性 display: flex 的使用时。 如果您想通过添加一个媒体查询规则来控制换行，则可以在 .container 类中创建一个注入：
.container {
display: flex;
flex-wrap: wrap;
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
.container {
display: block;
}
}
四、flex-wrap属性的值可以是
flex-wrap属性的值可以是以下防范：
- nowrap：flex容器不会换行。默认情况下，flex容器是 nowrap 的。
- wrap：flex容器在必要时断开到下一行或列。
- wrap-reverse：flex容器在必要时断开到下一行或列，但包裹方向与 wrap 相反。
五、flex wrap换行时添加间隙
如果您需要在 flex容器内的某些行之间添加空隙，可以使用margin或padding。以下是使用padding控制行与行之间间距的示例：
.container {
display: flex;
flex-flow: row wrap;
padding: 10px 0 0 10px;
}
.container > div {
height: 100px;
width: 100px;
background-color: #ddd;
margin: 10px;
}
六、display flex选取
如果您想在页面上使用网格，则将display:grid与flex-wrap属性结合使用是非常有用的。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
上面这个例子将创建一个以列数为参考值，但以网格线中容器最大值为边界值进行缩放的自适应布局。
七、总结
在使用flex布局时，flex-wrap属性可以让子项在父容器中自动换行。使用此属性可以明显提高布局的灵活性，以创造更美好的用户体验。我们还探讨了flex-wrap的属性值、间距以及如何故障排除flex-wrap的问题。使用这些技巧可以给您的布局带来独特而出色的外观。
