1.介绍
在设置display: flex的容器中，其中的子元素默认是不换行的，当其子元素的总宽度大于容器的宽度时，其会将子元素的宽度挤压，即得不到我们想要的宽度。而flex-wrap则可以将容器设置为是否可换行，其中常用的值有如下所示：
- nowrap（默认值）
nowrap即不换行，其子元素的中宽度大于容器的宽度时，子元素的宽度会被挤压变小，代码如下图所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
display: flex;
margin: 0px auto;
width: 800px;
height: 300px;
background-color: purple;
flex-wrap: nowrap;
}
.item {
background-color: red;
margin-left: 10px;
margin-top: 10px;
width: 250px;
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
其效果如下图所示：
flex-wrap: nowrap效果图
-
wrap
即换行，其子元素的宽度不会被挤压变小，效果如下图所示：
flex-wrap: wrap效果图
自己先给自己点个赞，冲啊！咱是最棒的！嘿嘿！观看的小可爱一起点个赞呗，求求了！
