如何在父div宽度占满时，使溢出的div自动换行至底部？

要让宽度300px的flex父容器.main内的.inner元素在空间不足时自动换行，只需要给父容器添加flex-wrap: wrap属性即可，这是flex布局控制换行的核心设置。

完整代码示例 #

HTML

<div class="main">
  <div class="inner">tag1</div>
  <div class="inner">tag2</div>
  <div class="inner">tag3</div>
  <div class="inner">tag4</div>
  <div class="inner">tag5</div>
  <div class="inner">tag6</div>
  <div class="inner">tag7</div>
  <div class="inner">tag8</div>
</div>

CSS

.main {
  display: flex;
  width: 300px;
  flex-wrap: wrap; /* 开启自动换行的关键属性 */
  border: 1px solid #ddd; /* 可选：方便查看容器边界 */
}

.inner {
  width: 80px; /* 示例固定宽度，确保总宽度超出父容器 */
  height: 40px;
  margin: 5px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

关键说明 #

• flex布局默认的flex-wrap值是nowrap，会强制所有子元素在同一行显示，超出部分直接溢出容器；设置为wrap后，子元素会在父容器宽度不足以容纳当前行所有元素时，自动换行至下方。
• 无论子元素是固定宽度还是使用flex属性设置弹性宽度，只要总宽度超过父容器，flex-wrap: wrap都会触发换行逻辑。

内容的提问来源于stack exchange，提问作者Sreehari Avikkal