CSS Flexbox移动端布局问题：绿盒高度占比与黄盒对齐调整

问题分析 #

原代码在移动端视图下存在两个核心问题：

• 绿色盒子无法固定为页面整体高度的25%，且与黄色区块高度冲突
• 内容区块的高度顺序不符合设计稿要求

修改步骤 #

1. 固定绿色盒子高度：在媒体查询中给.green设置height: 25vh（对应页面100vh高度的25%），同时取消它的flex-grow属性，避免被父容器拉伸
2. 让黄色区块填充剩余高度：给.yellow添加flex-grow: 1，使其占满.yellow_green_wrapper的剩余空间，同时移除height: 100%避免高度溢出
3. 修正选择器错误：把原媒体查询中错误的.yellow.four改为.yellow > div.four，确保黄色区块内的第四个小盒子宽度设置生效
4. 调整容器排列方向：根据设计稿的高度顺序，设置.yellow_green_wrapper的flex-direction为column（若设计稿要求绿色在下则保留column-reverse）

修改后的完整CSS代码 #

.container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    gap: 0.5rem;
    padding: 0.5rem;
    box-sizing: border-box; /* 避免padding导致容器溢出 */
}

@media only screen and (max-width: 600px) {
    .yellow_green_wrapper {
        flex-direction: column; /* 按设计稿顺序调整，绿色在上；若需绿色在下则改为column-reverse */
        flex-grow: 1; /* 让容器占满父容器剩余高度 */
    }

    .green {
        height: 25vh; /* 固定为页面整体高度的25% */
        flex-grow: 0; /* 取消自动拉伸 */
    }

    .yellow {
        flex-grow: 1; /* 填充容器剩余高度 */
        height: auto; /* 去掉固定高度，由flex布局控制 */
    }

    .yellow > div.four {
        width: 100%;
    }
    .yellow > div.two, .yellow > div.three, .yellow > div.four {
        width: 33%;
    }
}

.yellow_green_wrapper {
    display: flex;
    width: 100%;
    position: relative;
    flex-grow: 1;
}

.red, .blue, .green, .yellow {
    width: 100%;
    position: relative;
    flex-grow: 1;
}

.red label, .blue label, .green label, .yellow label{
    position: absolute;
    left: 50%;
    top: 50%;
}

.red {
    background-image: linear-gradient(rgba(122, 45, 45, 0.9),rgba(168, 77, 77, 0.9));
}

.blue {
    background-image: linear-gradient(rgba(31, 70, 177, 0.9),rgba(144, 172, 209, 0.9));
}

.green {
    background-image: linear-gradient(rgba(161, 241, 181, 0.9),rgba(101, 163, 114, 0.9));
}

.yellow {
    display: flex;
    flex-flow: row wrap;
}

.yellow, .green {
    height: 100%; /* 仅在桌面端生效，移动端会被媒体查询覆盖 */
}

.yellow > div {
    background-image: linear-gradient(rgba(248, 171, 6, 0.9),rgba(230, 181, 117, 0.9));
    flex-grow: 1;
    margin: 0.5rem;
    box-sizing: border-box; /* 避免margin+width导致溢出 */
}

.yellow > div.one {
    width: 100%;
}

额外优化说明 #

• 给.container和.yellow > div添加box-sizing: border-box，避免padding、margin导致的容器宽度/高度溢出问题
• 移动端下.yellow的高度设为auto，由flex布局自动控制，确保与绿色盒子高度对齐且填充剩余空间

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