如何让Flex布局元素根据屏幕尺寸自动换行？

直接调整CSS即可满足需求，具体修改步骤如下：

调整父容器.parent的CSS #

• 删除overflow-x:scroll;
• 添加flex-wrap: wrap; —— 这是flex布局实现自动换行的核心属性，默认flex容器会强制所有子元素在一行显示，开启该属性后，当子元素总宽度超出容器宽度时会自动换行
• 新增gap: 10px 8px; —— 用这个属性统一控制子元素之间的上下、左右间距，替代子元素的margin-left，避免换行后第一个子元素左侧出现多余空白

调整子元素.child的CSS #

• 删除width:100%; —— 已经设置了min-width和max-width，该属性会强制子元素占满容器宽度，阻碍换行逻辑
• 删除margin-left:8px; —— 改用父容器的gap统一管理间距，布局更规整

修改后的完整CSS代码 #

.parent{
  max-width:1100px;
  width:calc(100% - 4rem);
  display:flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  padding:10px 0px;
}

.child{
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 10px;
  font-size: 1.6rem;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 3px 15px 0px;
  margin-top: 0px;
  height: 250px;
  min-width: 285px;
  max-width: 285px;
}

HTML代码无需改动 #

<div class="parent">
  <div class="child">test</div>
  <div class="child">test</div>
  <div class="child">test</div>
  <div class="child">test</div>
  <div class="child">test</div>
  <div class="child">test</div>
  <div class="child">test</div>
  <div class="child">test</div>
</div>

逻辑说明 #

• flex-wrap: wrap解决了flex容器强制单行的问题，是实现换行的关键
• gap属性比单独设置margin更高效，能自动处理所有子元素的间距，避免布局漏洞
• 子元素的min-width:285px保证了元素的最小展示宽度，结合父容器max-width:1100px的限制，常规屏幕下刚好能一行容纳3-4个元素，宽度不足时自动换行

内容的提问来源于stack exchange，提问作者Martin AJ