求助：用Flexbox实现无需手动指定尺寸的响应式三列布局

需求说明 #

1. 无需手动指定像素尺寸，仅通过 Flexbox 实现 #two 与 #three 布局效果一致
2. 修复 #three 容器缩小时布局失效的响应式问题，全程不使用 Grid 布局

解决方案 #

核心思路 #

• 原 #three 用固定像素尺寸导致响应式失效，替换为相对单位的动态计算即可解决
• #two 原公式 calc(100%/3) 未考虑容器内的 padding 和 gap，修正计算公式就能匹配实际可用空间

修改后的完整代码 #

HTML（无需改动）

<div id="one">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

<div id="two" class="space">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

<div id="three" class="space">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

CSS（关键修改标注）

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(146, 55, 158);
    gap: 75px;
    /* 小屏幕下允许换行，避免容器挤压 */
    flex-wrap: wrap;
    padding: 20px;
}

div {
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    outline: 1px solid #fff;
    /* 替换固定尺寸为响应式尺寸，兼顾最大宽度和屏幕适配 */
    width: min(300px, 90vw);
    height: min(300px, 90vw);
}

p {
    outline: 1px solid #fff;
    width: calc(100% / 3);
    height: calc(100% / 3);
}

.space {
    padding: 10px;
    gap: 10px;
}

/* 统一 .space 容器内 p 元素的动态尺寸计算，替换原 #three 的固定像素 */
.space p {
    /* 计算逻辑：容器可用宽度 = 容器宽度 - 左右padding - 2个列间隙（3列有2个gap） */
    width: calc((100% - 2 * 10px) / 3);
    height: calc((100% - 2 * 10px) / 3);
    /* 禁止元素收缩，保证布局稳定 */
    flex-shrink: 0;
}

/* 移除原 #three 的固定尺寸样式 */
/* #three p {
    width: 86.67187118px;
    height: 86.67187118px;
} */

效果说明 #

1. #two 和 #three 现在布局完全一致，且未使用任何固定像素尺寸
2. 容器缩小时（如小屏幕或手动调整窗口），内部元素会自动按比例缩放，不会出现换行或布局错乱
3. 通过 min() 函数保证容器在大屏幕下保持300px的固定大小，小屏幕自适应屏幕宽度

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