Flex布局（justify-content:space-between）溢出时子元素换行排列方案

要实现这个需求，只需给flex容器添加换行属性，再给子元素设置合适的弹性规则，就能让容器宽度不足时自动将两个div分成两行排列：

修改后的CSS代码：

.container {
    background: wheat;
    padding: 10px;
    width: 300px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* 开启自动换行 */
}

.container > div {
    flex: 1 1 200px; /* 弹性伸缩+最小宽度200px */
    margin-bottom: 10px; /* 换行后增加上下间距（可选） */
}

/* 移除最后一个元素的底部间距（可选优化） */
.container > div:last-child {
    margin-bottom: 0;
}

HTML代码保持不变：

<div class="container">
    <div>Lorem ipsum dolor sit amet 1</div>
    <div>Lorem ipsum dolor sit amet 2</div>
</div>

核心逻辑 #

• flex-wrap: wrap：让flex容器在子元素总宽度超出容器宽度时自动换行。
• flex: 1 1 200px：设置子元素最小宽度为200px，当容器宽度小于两个子元素最小宽度之和时触发换行；换行后子元素会通过flex:1自动占满整行宽度，实现上下排列的效果。如果不需要固定最小宽度，也可以把200px换成auto，让子元素根据自身内容宽度决定是否换行。

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