在CSS弹性布局体系中，flex-wrap属性决定了弹性容器内的子元素在空间不足时的处理方式，其中nowrap和wrap是两个基础且常用的取值，二者的换行行为存在明显差异，直接影响页面布局的最终呈现效果。
flex-wrap属性基础说明
flex-wrap是弹性容器（设置display:flex的元素）的可选属性，默认取值为nowrap，可选值还包括wrap和wrap-reverse。该属性仅作用于直接子元素，不会影响更深层级的元素排列。
nowrap取值的行为表现
当flex-wrap设置为nowrap时，弹性容器内的所有子元素会被强制排在同一行，不会换行。如果所有子元素的总宽度超过弹性容器的宽度，子元素会被自动缩小宽度以适应容器，不会溢出到容器外部。
我们可以通过以下代码验证nowrap的行为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
display: flex;
flex-wrap: nowrap; /* 默认值，可省略 */
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.item {
width: 100px;
height: 80px;
background-color: #e6f7ff;
border: 1px solid #91d5ff;
margin: 5px;
text-align: center;
line-height: 80px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">子元素1</div>
<div class="item">子元素2</div>
<div class="item">子元素3</div>
<div class="item">子元素4</div>
</div>
</body>
</html>
上述代码中，容器宽度为300px，每个子元素基础宽度100px，加上margin后单个子元素实际占用110px，4个子元素总宽度为440px，超过容器宽度。此时nowrap会让所有子元素保持在一行，每个子元素的实际宽度会被压缩到小于100px，不会出现换行。
wrap取值的行为表现
当flex-wrap设置为wrap时，弹性容器内的子元素会在空间不足时自动换行到下一行，不会强制压缩子元素的宽度。如果子元素的总宽度超过容器宽度，超出部分的子元素会排列到新的一行，每一行的排列规则和第一行一致。
我们将上述代码的flex-wrap改为wrap，查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
display: flex;
flex-wrap: wrap; /* 设置为换行 */
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.item {
width: 100px;
height: 80px;
background-color: #e6f7ff;
border: 1px solid #91d5ff;
margin: 5px;
text-align: center;
line-height: 80px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">子元素1</div>
<div class="item">子元素2</div>
<div class="item">子元素3</div>
<div class="item">子元素4</div>
</div>
</body>
</html>
此时前3个子元素会排在第一行，总宽度为330px超过容器300px，第4个子元素会自动换到第二行排列，所有子元素都会保持100px的基础宽度，不会被压缩。
两种取值的适用场景
- nowrap适合需要子元素始终保持单行排列的场景，比如顶部导航栏、横向滚动的商品列表，需要保证所有内容在同一行展示，不换行。
- wrap适合需要自适应排列的场景，比如卡片列表、图文混排区域，当空间不足时自动换行，保证每个子元素的尺寸符合设计预期，不需要额外做宽度适配。
注意事项
如果子元素设置了flex-shrink: 0，那么即使flex-wrap设置为nowrap，子元素也不会被压缩，此时总宽度超过容器宽度会出现溢出情况。而wrap取值下，即使子元素设置了flex-shrink: 0，超出部分也会换行，不会溢出容器。
需要注意flex-wrap的换行行为仅对主轴为水平方向（flex-direction: row或row-reverse）的弹性容器生效，如果主轴为垂直方向，换行行为会变为换列，逻辑和水平方向一致。
flex-wrapnowrapwrapCSS_flex布局修改时间：2026-06-26 01:51:33