利用css flexbox轻松构建2:5:3比例的自适应高度布局
本文介绍如何使用CSS弹性盒模型(Flexbox)创建一个容器，其内部三个子元素的高度比例精确为2:5:3，并能根据屏幕尺寸自动调整，始终保持比例和填充父容器高度。
我们需要一个包含三个子元素的容器，这三个子元素的高度比例需保持2:5:3，且在各种屏幕分辨率下都能完美适配。Flexbox布局能够轻松实现这一目标。
关键在于设置父容器的display: flex和flex-direction: column属性，这使得子元素垂直排列。然后，使用flex属性设置每个子元素占据空间的比例：flex: 2、flex: 5、flex: 3分别表示子元素占据父容器高度的2份、5份和3份。父容器高度会根据内容自动调整，确保子元素比例正确且自适应。为了垂直居中，我们使用了align-items: center。
以下代码片段演示了实现方法：
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: column;
align-items: center; /* 垂直居中 */
height: 100vh; /* 占满视口高度，可根据实际情况修改 */
}
.item1 {
flex: 2;
}
.item2 {
flex: 5;
}
.item3 {
flex: 3;
}
为了更直观地展示效果，我们提供一个完整的HTML示例：
Flexbox Layout
这段代码创建了一个高度自适应、比例为2:5:3的布局。父容器高度设置为100vh，使其占满视口高度，您可以根据实际需求调整。
