CSS中的flex-wrap是一个非常有用的属性，用于指定flex容器中的flex项目如何折行显示。当flex项目的总宽度大于容器的宽度时，就需要使用flex-wrap来控制项目是否折行，以及如何进行折行。下面是一个示例代码，演示了flex-wrap的基本用法：

.flex-container {display: flex;flex-wrap: wrap;}.flex-item {flex: 1;margin: 10px;}

在上面的代码中，我们首先定义了一个flex容器，它的display属性设置为flex，表示该容器采用flex布局。然后，我们将flex-wrap属性设置为wrap，表示flex项目将会在容器的宽度不足时自动折行。接下来，我们定义了一个flex项目，其中flex属性设置为1，表示flex容器中的所有项目都会平均分配剩余空间。同时，我们设置了10像素的外边距，以确保不同的项目之间保持一定的间距。下面是一个显示了多行flex项目的例子：

.flex-container {display: flex;flex-wrap: wrap;}.flex-item {flex: 1 1 200px;margin: 10px;}

在这个例子中，我们同样定义了一个flex容器，并将flex-wrap属性设置为wrap。不过这次我们还添加了一个更加具体的flex属性，其中1 1 200px表示该项目的flex-grow、flex-shrink和flex-basis属性分别为1、1和200像素。这样，即使容器宽度小于200像素，项目也不会缩小超过200像素。总之，flex-wrap属性是flex布局中非常有用的一个属性，可以帮助我们更好地控制flex项目的显示方式和排列方式。如果你正在使用flex布局，那么一定要学会使用flex-wrap，以便更好地掌控设计和布局。