如何让固定尺寸的Div按行排列，超出宽度自动换行？

Flex布局实现 #

你用Flex没实现换行，是因为默认flex-wrap: nowrap（强制不换行），只需给容器添加flex-wrap: wrap即可。如果想更简洁地控制间距，推荐用gap属性（比margin更易维护，避免边缘间距溢出）：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 控制元素间的水平/垂直间距 */
  padding: 10px; /* 避免边缘元素贴容器边界 */
}

.item {
  width: 300px;
  height: 400px;
  background-color: grey;
}

<body>
  <h1>Aleno</h1>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>

如果想保留你原来的margin写法，只需给容器加flex-wrap: wrap，同时给容器加padding: 10px抵消边缘元素的margin，避免容器出现横向滚动条：

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.item {
  width: 300px;
  height: 400px;
  background-color: grey;
  margin: 10px;
}

Grid布局实现 #

Grid也能实现自动适配列数，核心是用repeat(auto-fit, 300px)让浏览器根据容器宽度自动计算可容纳的列数，空间不足时自动换行：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  gap: 20px;
  padding: 10px;
  justify-content: start; /* 保持左对齐，和Flex效果一致 */
}

.item {
  width: 300px;
  height: 400px;
  background-color: grey;
}

<body>
  <h1>Aleno</h1>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>

关键说明 #

• Flex方案中flex-wrap: wrap是触发自动换行的核心；
• Grid方案中auto-fit会自动适配容器宽度，根据固定的300px尺寸计算列数，超出则换行；
• gap属性可统一控制元素间的水平/垂直间距，比margin更易维护。

内容的提问来源于stack exchange，提问作者Vince M