使用Flexbox开发三列预览卡时如何让三个容器同尺寸同速率增长

问题修复方案 #

核心原因

flex布局高度不一致是三个配置问题导致的：

1. 移动端给.panel设置的align-items: center在横屏媒体查询里没有被重置，flex横向排列时align-items为center会让子元素高度随内容走，不会自动撑满等高
2. 父容器没有明确高度的情况下，子元素设置height: 100%不会生效
3. 现有代码存在CSS语法错误，导致部分样式不生效

修复代码

body {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0; /* 清除默认body外边距避免布局偏移 */
}

/* panel整体容器 */
.panel {
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 1px solid white;
    border-radius: 10px;
    width: 100%;
    max-width: 960px;
}

/* 每列样式 */
.panel section {  
    display: flex;
    padding: 2.5rem;
    flex-direction: column;
    text-align: left;
    border-bottom: none;
} /* 补充缺失的闭合大括号 */

@media only screen and (min-width: 560px) {
    .panel {
        flex-direction: row;
        border-radius: 10px;
        width: 80%;
        align-items: stretch; /* 显式设置子元素高度自动撑满容器，实现等高 */
    }

    .panel section {
        flex: 1; /* 等价于flex-grow:1; flex-shrink:1; flex-basis:0%; 强制三个列宽度完全均分，不受内容影响 */
    }
}

关键修改说明

• 移除了.panel全局的align-items: center，横屏状态显式设置align-items: stretch，这个属性会自动让所有flex子元素的高度等于容器最高的那个子元素高度，实现等高效果
• 给横屏的.panel section设置flex:1，其中flex-basis为0的配置会强制三个列完全均分容器宽度，不会因为内容长度不同出现宽度差异
• 修复了CSS语法错误，确保所有样式正常生效

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