在网页前端开发中，Div元素的并排显示和自动换行是极为常见的布局需求，传统的浮动布局需要手动清除浮动，还容易出现高度塌陷、元素错位等问题，维护成本较高。CSS Flexbox布局作为弹性盒子布局模型，通过简单的属性配置就能轻松实现Div元素的并排排列与自动换行，大幅降低了布局复杂度。
Flexbox布局基础概念
Flexbox布局的核心是将父容器设置为弹性容器，子元素自动成为弹性项目，通过控制弹性容器的属性来调整所有子元素的排列规则。要使用Flexbox布局，首先需要将父容器的display属性设置为flex或者inline-flex，前者会让容器表现为块级弹性容器，后者表现为行内弹性容器。
核心属性说明
实现Div并排和自动换行主要依赖两个核心属性：
- flex-direction：定义弹性项目的排列方向，默认值为
row，表示子元素沿水平方向从左到右排列，这是实现Div并排的基础。 - flex-wrap：定义弹性项目超出容器宽度时是否换行，默认值为
nowrap不换行，设置为wrap即可实现自动换行。
实现Div并排显示
只需要将父容器设置为弹性容器，子Div元素就会默认沿水平方向并排排列，不需要额外设置浮动或者行内块样式。
以下是基础并排显示的代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div并排显示示例</title>
<style>
.container {
display: flex; /* 设置为弹性容器 */
width: 800px;
height: 200px;
background-color: #f0f0f0;
padding: 10px;
}
.item {
width: 150px;
height: 150px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 150px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Div1</div>
<div class="item">Div2</div>
<div class="item">Div3</div>
<div class="item">Div4</div>
</div>
</body>
</html>
上述代码中，父容器container设置display: flex后，内部的四个itemDiv会默认水平并排排列，不需要设置float或者display: inline-block属性。
实现Div自动换行
当子Div的总宽度超出父容器的宽度时，默认情况下Flexbox不会换行，子元素会被压缩宽度。要实现自动换行，只需要给父容器添加flex-wrap: wrap属性即可。
自动换行的代码示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div自动换行示例</title>
<style>
.container {
display: flex;
flex-wrap: wrap; /* 设置自动换行 */
width: 500px;
background-color: #f0f0f0;
padding: 10px;
}
.item {
width: 150px;
height: 150px;
background-color: #2196F3;
color: white;
text-align: center;
line-height: 150px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Div1</div>
<div class="item">Div2</div>
<div class="item">Div3</div>
<div class="item">Div4</div>
<div class="item">Div5</div>
</div>
</body>
</html>
父容器宽度为500px，每个子Div宽度为150px，加上margin后每行最多容纳3个Div，第4个和第5个Div会自动换到下一行显示，完美实现自动换行效果。
常见问题与注意事项
在使用Flexbox实现Div并排和换行时，有几个需要注意的点：
- 如果子元素设置了固定宽度，父容器宽度不足时，默认
flex-wrap: nowrap会让子元素被压缩，此时需要手动设置flex-shrink: 0禁止子元素收缩，或者设置flex-wrap: wrap允许换行。 flex-direction如果设置为column，子元素会垂直排列，此时flex-wrap控制的是垂直方向的换行，需要结合height属性使用。- 弹性容器的
justify-content属性可以调整子元素在主轴上的对齐方式，比如设置为space-between可以让并排的Div之间自动分配剩余空间，实现更美观的布局效果。
总结
CSS Flexbox布局通过display: flex和flex-wrap: wrap两个核心属性，就能轻松解决Div元素的并排显示和自动换行问题，相比传统浮动布局代码更简洁，维护更方便，兼容性也覆盖了绝大多数现代浏览器。开发者只需要掌握这两个属性的用法，就能应对大部分常见的Div排列布局需求，大幅提升前端布局的开发效率。
CSS_FlexboxDiv并排显示自动换行flex_wrap修改时间：2026-07-09 01:57:33