如何让除首个Flex列外的所有列换行且首列宽度不变

要实现你需要的布局，核心是让第一个盒子保持固定宽度不被压缩，同时让右侧容器内的元素能灵活换行。你之前遇到的第一个盒子被缩放问题，是因为外层flex容器的子项默认会自动收缩，调整方案如下：

修改后的CSS代码 #

.container {
    display: flex;
    margin: auto;
    max-width: 1250px;
    min-width: 630px;
}

.content {
    display: flex;
    width: 300px;
    height: 300px;
    /* 禁止第一个盒子被压缩，保持固定宽度 */
    flex-shrink: 0;
    /* 可选：添加边框方便观察布局 */
    border: 1px solid #ccc;
    align-items: center;
    justify-content: center;
}

.content_container {
    display: flex;
    flex-wrap: wrap;
    /* 让右侧容器占据第一个盒子之外的所有剩余空间 */
    flex-grow: 1;
    /* 设置最小宽度，确保窗口缩小时触发换行 */
    min-width: 300px;
    /* 可选：添加间隙让盒子布局更美观 */
    gap: 10px;
    padding-left: 10px;
    align-items: flex-start;
}

关键调整说明 #

• flex-shrink: 0：给第一个.content添加这个属性，强制它保持300px的固定宽度，不会因为外层容器空间不足而被压缩。
• flex-grow: 1：让.content_container占据外层容器中第一个盒子以外的所有剩余空间，确保内部盒子有足够的换行空间。
• min-width: 300px：限制右侧容器的最小宽度，当窗口缩小到临界值时，容器内的盒子会自动按顺序换行，实现你需要的“第4个盒子移至第2个下方，第3个移至第4个下方”的效果。

完整演示代码 #

<div class='container'>
    <div class='content'>1</div>
    <div class='content_container'>
        <div class='content'>2</div>
        <div class='content'>3</div>
        <div class='content'>4</div>
    </div>
</div>

调整后拖动窗口宽度，第一个盒子会始终保持固定宽度，右侧容器内的盒子会在空间不足时自动换行，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Jonas Eek Erikson