使用CSS Flexbox构建不同分辨率下高度比例为2:5:3的自适应布局
本文将演示如何在PC端利用CSS Flexbox创建高度自适应的布局，其子元素高度比例始终保持2:5:3，并完美兼容各种屏幕分辨率。 这只需简单的Flexbox属性即可实现。
我们的目标是将一个容器分成三个子元素，并按2:5:3的比例分配高度。 无论容器高度如何变化，子元素的高度比例都应保持不变。
解决方案的关键在于Flexbox布局的flex属性。 通过设置父元素的display: flex和flex-direction: column，我们将父元素的主轴方向设置为垂直方向，使子元素垂直排列。
立即学习“前端免费学习笔记（深入）”；
接下来，为每个子元素设置flex属性：flex: 2、flex: 5和flex: 3分别表示这三个子元素占据可用空间的比例为2、5和3。 这样，无论父容器高度如何，它们的高度比例始终保持2:5:3。 为了垂直居中，我们使用了align-items: center。
以下为CSS和HTML代码示例：
.container {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh; /* 占据视窗高度 */
}
.item1 {
flex: 2;
background-color: pink;
}
.item2 {
flex: 5;
background-color: blue;
}
.item3 {
flex: 3;
background-color: cadetblue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
<style>
/* CSS代码同上 */
</style>
</head>
<body>
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
这段代码创建了一个高度自适应的布局，子元素高度比例始终为2:5:3。 请注意，父元素container必须设置height: 100vh;或其他方式确保其占据足够的高度，才能使子元素按照比例分配高度。
通过以上方法，您可以轻松实现高度自适应且比例固定的Flexbox布局。
