如何实现响应式三栏布局：小屏时首栏独占一行

问题描述 #

我正在尝试制作一个简单的响应式CSS三栏布局：桌面端三栏并排显示，当屏幕分辨率小于600px时，第一列（菜单A）独占一行，B和C栏移至下一行。当前代码桌面端表现正常，但移动端换行效果不符合预期，需要调整。

修改后的实现代码 #

CSS代码 #

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.A { background-color: #333333; color: #fff; padding: 1rem; }
.B { background-color: #777777; padding: 1rem; }
.C { background-color: #999999; padding: 1rem; }

:root {
    --sidebar-width: 214px;
}

.flex-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* 允许子元素自动换行 */
}

/* 移动端默认布局：A独占一行，B、C各占50%（可按需调整为100%让它们也各自换行） */
.A {
    width: 100%;
}
.B, .C {
    width: 50%;
}

/* 桌面端布局：三栏并排 */
@media only screen and (min-width: 600px) {
    .A, .C {
        width: var(--sidebar-width);
        flex: 0 0 var(--sidebar-width); /* 固定宽度，不伸缩 */
    }
    .B {
        flex: 1; /* 自动填充剩余空间 */
        width: auto;
    }
}

HTML代码 #

<div class="flex-container">
    <div class="A">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

    <div class="B">
        Something
    </div>

    <div class="C">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>

核心优化点 #

1. 移除冗余换行元素：删掉原代码中.line_break_for_mobile，改用Flex原生的flex-wrap: wrap实现自动换行，减少不必要的DOM元素和样式冲突。
2. 简化布局逻辑：
   • 移动端默认让A占满100%宽度，自然独占一行；B和C可根据需求设置宽度（示例中设为50%并排，若需要各自换行只需改为width:100%）。
   • 桌面端通过flex:0 0 宽度值固定A和C的侧边栏宽度，B用flex:1自动填充剩余空间，比原代码的calc计算更简洁可靠。
3. 统一Flex属性：所有子元素的布局逻辑通过容器和媒体查询统一控制，避免分散的样式定义导致的混乱。

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