如何让div横向排列，超出宽度时自动换行（类文本排版）？

要实现你要的「尽可能横向排列、超出容器宽度自动换行」的效果，只需要对容器和子元素做两处关键修改：

1. 给.my-div-container设置display: flex和flex-wrap: wrap
2. 给.my-div添加flex-shrink: 0，避免元素被挤压变形

修改后的完整CSS代码 #

.my-div-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap; /* 超出容器宽度时自动换行 */
}

.my-div {
  border: solid #FF0000 5px;
  width: 200px;
  height: 200px;
  margin: 10px;
  flex-shrink: 0; /* 禁止元素被压缩，保持固定宽度 */
}

原理说明 #

• 原来的.my-div是块级元素，默认会独占一行，所以呈现垂直堆叠状态
• 你之前用inline-flex时，容器本身是行内元素，且flex-wrap默认值为nowrap，所有子元素会强行挤在一行，导致宽度被压缩
• 使用display: flex让容器成为块级弹性容器，配合flex-wrap: wrap，当子元素总宽度超过容器时就会自动换行；flex-shrink: 0确保每个卡片保持你设置的固定宽度，不会被挤压变形

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