Flex布局可让左右栏自动等高——父容器设display: flex，子项默认align-items: stretch拉伸对齐；无需JS或固定高度，响应式时用@media改flex-direction为column即可堆叠。
用 Flex 布局让左右栏自动等高，是最简洁可靠的解法——父容器设 display: flex，子栏目默认就拉伸对齐，无需 JS 或固定高度。
把左右栏的直接父元素（比如 .container）设为 flex 容器：
display: flex —— 启用弹性布局
flex-direction: row（默认可省略）—— 水平排列左右栏align-items: stretch（默认值，可不写）—— 子项自动填满交叉轴（即高度方向）只要不写 height、max-height 或 flex: 0 0 auto 这类限制拉伸的属性，左右栏就会自然撑开到父容器最高子项的高度。
min-height: 100vh 强撑，它只保底，不联动小屏幕时让左右栏堆叠，只需在断点处改 flex 方向：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) { .container { flex-direction: column; } }基本上就这些。Flex 的 stretch 行为是浏览器原生支持的，兼容性好（IE10+），代码干净，维护成本低。
以上就是css首页布局左右栏高度不同怎么办_利用flex自动撑开列高保持整齐的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
953
收藏
