Flex 布局双列等高：巧妙解决高度不一致问题
在网页布局中，常常需要实现两列等高的效果。本文将分析并解决一个使用 Flex 布局实现双列等高时遇到的高度问题。
问题： 使用 Flex 布局创建左右两列，左侧（left）宽度为 50%，设置了 height: 300px；右侧（right）宽度也为 50%，但高度未设置，导致右侧高度无法与左侧一致。
原始代码：
.parent { display: flex; height: 200px; /* 限制了父元素高度 */ border: solid darkcyan 1px; overflow-y: auto;}.left { background: lightblue; height: 300px; /* 超出父元素高度 */ width: 50%;}.right { width: 50%; background-color: lightcoral;}
由于 .parent 的高度被限制为 200px，而 .left 的高度为 300px，超过了父元素的高度，导致布局异常。同时，Flex 布局中，子元素高度默认由内容撑开，如果内容不足，则不会影响父元素高度。
解决方案：
移动端UI&微信UI YDUI Touch
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
81 查看详情
为了解决这个问题，我们可以添加一个中间容器，让 .left 和 .right 作为这个中间容器的子元素。这个中间容器的高度将由其子元素内容撑开，从而保证两列等高。
修改后的代码：
.parent { display: flex; /* height: 200px; 移除高度限制，或根据实际情况调整 */ border: solid darkcyan 1px; overflow-y: auto;}.box { display: flex; /* 将中间容器也设置为Flex布局 */ width: 100%; /* 确保中间容器占满父容器宽度 */}.left { background: lightblue; height: 300px; width: 50%;}.right { width: 50%; background-color: lightcoral;}
通过添加 box 容器，并将 .left 和 .right 放入其中，box 的高度会根据其子元素的高度自动调整，从而使两列等高。 parent 容器的高度限制可以移除或调整为合适的值，以适应内容的高度。 重要的是，box 本身不需要设置高度。 同时，将box也设置为Flex布局，确保其子元素能够正确地进行Flex布局。
通过这个方法，我们成功地利用 Flex 布局实现了双列等高的效果。
以上就是Flex布局双列等高如何实现？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1132590.html
微信扫一扫 
支付宝扫一扫 
