css首页布局左右栏高度不同怎么办_利用flex自动撑开列高保持整齐

Flex布局可让左右栏自动等高——父容器设display: flex，子项默认align-items: stretch拉伸对齐；无需JS或固定高度，响应式时用@media改flex-direction为column即可堆叠。

用 Flex 布局让左右栏自动等高，是最简洁可靠的解法——父容器设 display: flex，子栏目默认就拉伸对齐，无需 JS 或固定高度。

父容器启用 Flex 布局

把左右栏的直接父元素（比如 .container）设为 flex 容器：

• display: flex —— 启用弹性布局
• flex-direction: row（默认可省略）—— 水平排列左右栏
• align-items: stretch（默认值，可不写）—— 子项自动填满交叉轴（即高度方向）

左右栏不设固定高度，也不用 min-height

只要不写 height、max-height 或 flex: 0 0 auto 这类限制拉伸的属性，左右栏就会自然撑开到父容器最高子项的高度。

• 左侧内容多？右侧自动跟高
• 右侧加了大图或长列表？左侧也同步拉齐
• 避免用 min-height: 100vh 强撑，它只保底，不联动

响应式下想变单列？加个媒体查询就行

小屏幕时让左右栏堆叠，只需在断点处改 flex 方向：

• @media (max-width: 768px) { .container { flex-direction: column; } }
• 此时左右栏恢复“谁内容多谁高”，符合移动端阅读习惯
• 不需要额外 JS 或重写结构

基本上就这些。Flex 的 stretch 行为是浏览器原生支持的，兼容性好（IE10+），代码干净，维护成本低。