CSS Flexbox是CSS3引入的弹性盒布局模型，专门用于解决一维方向的布局问题，对于实现div元素并排显示且自动换行的需求，相比传统的float、inline-block方案，Flexbox的语法更简洁，适配性更好，不需要处理清除浮动等额外问题。
Flexbox实现并排换行布局的核心属性
要实现div并排且自动换行，只需要掌握三个核心的Flexbox属性即可，分别是display:flex、flex-wrap、justify-content。
1. 开启Flexbox容器
首先需要将父容器设置为flex容器，这样其内部的所有直接子div都会成为flex子项，默认会沿着主轴并排排列。
/* 父容器基础样式 */
.flex-container {
display: flex; /* 开启flex布局 */
width: 100%; /* 容器宽度，可根据实际需求调整 */
padding: 10px;
background-color: #f5f5f5;
box-sizing: border-box;
}
2. 控制自动换行：flex-wrap属性
flex容器默认情况下，子项会在一行内排列，即使超出容器宽度也不会换行，这时候需要设置flex-wrap: wrap来允许子项自动换行。
flex-wrap的可选值有三个：
- nowrap：默认值，不换行，子项会被压缩以适应容器宽度
- wrap：换行，第一行在上方，超出容器宽度的子项会自动换到下一行
- wrap-reverse：换行，第一行在下方，换行方向反转
3. 调整子项对齐方式：justify-content属性
当子项换行后，可能会出现最后一行子项不足导致左侧对齐留白的情况，这时候可以通过justify-content属性调整子项在主轴方向的对齐方式。
常用的justify-content值：
| 属性值 | 作用说明 |
|---|---|
| flex-start | 默认值，子项靠主轴起点对齐 |
| flex-end | 子项靠主轴终点对齐 |
| center | 子项在主轴方向居中对齐 |
| space-between | 子项两端对齐，子项之间间隔相等 |
| space-around | 每个子项两侧的间隔相等，子项之间的间隔是子项与容器边缘间隔的两倍 |
| space-evenly | 子项与子项之间、子项与容器边缘之间的间隔完全相等 |
完整实战代码示例
下面是一个完整的可实现div并排且自动换行的代码示例，包含父容器和子项的样式定义：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox并排换行布局示例</title>
<style>
/* 父容器样式 */
.flex-container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
justify-content: space-between; /* 子项两端对齐，间隔相等 */
width: 800px; /* 固定容器宽度，方便测试换行效果 */
margin: 0 auto;
padding: 15px;
background-color: #f0f0f0;
box-sizing: border-box;
}
/* 子项div样式 */
.flex-item {
width: 23%; /* 一行放4个，留部分间隔空间 */
height: 120px;
margin-bottom: 15px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center; /* 子项内文字垂直居中 */
justify-content: center; /* 子项内文字水平居中 */
font-size: 16px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Div 1</div>
<div class="flex-item">Div 2</div>
<div class="flex-item">Div 3</div>
<div class="flex-item">Div 4</div>
<div class="flex-item">Div 5</div>
<div class="flex-item">Div 6</div>
<div class="flex-item">Div 7</div>
<div class="flex-item">Div 8</div>
</div>
</body>
</html>
常见问题与解决方案
问题1：最后一行子项对齐不整齐
当使用justify-content: space-between时，最后一行如果子项数量不足，会出现左侧对齐的情况，看起来不整齐。这时候可以调整子项的宽度，或者使用justify-content: flex-start配合子项的margin来实现间隔效果。
/* 解决最后一行对齐问题的替代方案 */
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; /* 子项靠左对齐 */
}
.flex-item {
width: 23%;
margin-right: 2.666%; /* 每个子项右侧留间隔，4个子项总间隔为8% */
margin-bottom: 15px;
}
/* 去除每行最后一个子项的右侧margin */
.flex-item:nth-child(4n) {
margin-right: 0;
}
问题2：子项高度不一致导致换行后对齐错乱
如果flex子项的内容高度不一致，默认情况下子项会在交叉轴方向拉伸到和最高子项一样高，如果需要统一高度或者自定义对齐方式，可以设置align-items属性，可选值包括flex-start（顶部对齐）、center（垂直居中）、flex-end（底部对齐）等。
总结
使用CSS Flexbox实现div并排布局并自动换行，核心只需要三步：首先将父容器设置为display:flex，然后设置flex-wrap:wrap开启自动换行，最后根据需求设置justify-content调整对齐方式。相比传统布局方案，Flexbox不需要处理清除浮动、不会造成父容器高度塌陷，适配各种屏幕尺寸也更简单，是当下网页布局的首选方案之一。
CSS_Flexboxdiv并排布局flex_wrapjustify_contentalign_items修改时间：2026-07-02 21:45:15