在Flex布局中，可以使用flex-wrap属性来指定子元素在主轴方向上的换行方式。默认情况下，flex-wrap属性的值为nowrap，表示子元素不换行，当屏幕大小不足以容纳所有子元素时，子元素会被挤压在一行内。但是，当flex-wrap的值为wrap或wrap-reverse时，子元素将会在主轴方向上自动换行。
例如，下面的代码将创建一个flex容器，并将其子元素的flex-wrap属性设置为wrap，以便在屏幕不足以容纳所有子元素时自动换行：
<divclass="flex-container">
<divclass="flex-item">1</div>
<divclass="flex-item">2</div>
<divclass="flex-item">3</div>
<divclass="flex-item">4</div>
<divclass="flex-item">5</div>
<divclass="flex-item">6</div>
</div>
.flex-container{
display:flex;
flex-wrap:wrap;
}
.flex-item{
flex-basis:calc(33.33%-10px);/*每行放3个，间隔10px*/
margin:5px;/*设置间隔*/
}
在这个例子中，我们将flex-wrap属性设置为wrap，并将每个子元素的宽度设置为calc(33.33%-10px)，这样每行可以放下三个子元素，并在它们之间设置了一个间隔为10px的边距。这样，当屏幕不足以容纳所有子元素时，它们将会自动换行。
当屏幕大小不足以容纳所有子元素时，子元素将会按照flex-wrap属性的设置进行自动换行。如果flex-wrap的值为wrap，则子元素会从第一行开始向下进行换行；如果flex-wrap的值为wrap-reverse，则子元素会从最后一行开始向上进行换行。
在进行屏幕适配时，可以通过媒体查询来改变flex-wrap属性的值，以使得在不同的屏幕大小下显示的效果不同。例如，可以将flex-wrap属性的值在移动端设为wrap，在桌面端设为nowrap，以使得在移动端下显示为自动换行的布局，而在桌面端下则为一行布局。
以下是一个简单的示例，展示了如何使用媒体查询来实现不同屏幕大小下的flex-wrap属性值不同的效果：
.flex-container{
display:flex;
flex-wrap:nowrap;/*桌面端*/
}
@mediascreenand(max-width:600px){
.flex-container{
flex-wrap:wrap;/*移动端*/
}
}
在这个示例中，我们首先将flex-wrap属性的值设为nowrap，以便在桌面端显示为一行布局。接着，在媒体查询中，我们将flex-wrap属性的值设为wrap，以便在移动端下显示为自动换行的布局。当屏幕大小不足以容纳所有子元素时，子元素将会自动换行，以适应不同的屏幕大小。