CSS flex-wrap 属性

flex-wrap 属性定义了 flex 容器中的 flex 元素是如何排列的。

值

• nowrap：默认值，所有元素都在一行上排列，可能导致溢出容器。
• wrap：元素在多行上排列。
• wrap-reverse：元素在多行上排列，但是反向排列。

语法

flex-wrap: nowrap | wrap | wrap-reverse;

示例

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 200px;
}

在上面的示例中，.container 是一个 flex 容器，设置了 flex-wrap: wrap，这样 flex 元素会在多行上排列。.item 是 flex 元素，设置了 flex: 1 0 200px，表示元素可以伸缩，初始大小为 200px，但不缩小。

注意事项

• 使用 flex-wrap 可以控制 flex 元素在容器中的排列方式，避免溢出或排列不美观的情况。
• 结合其他 flex 属性一起使用，可以更灵活地布局页面。