css实现自适应高度的2:5:3垂直布局
本文介绍如何利用CSS构建一个三部分垂直布局，各部分高度比例为2:5:3，并能适应不同屏幕分辨率。 目标是让三个子元素填充父容器的整个高度，同时保持比例不变。
我们将使用CSS弹性盒模型（Flexbox）实现这一目标。通过设置父元素的display属性为flex，并将其flex-direction属性设置为column，可以轻松地将子元素垂直排列。flex-direction: column指定主轴方向为垂直方向，子元素将从上到下排列。
关键在于利用flex属性控制子元素的高度比例。 每个子元素的flex属性值决定其占据父容器高度的比例。例如，如果三个子元素的flex属性分别设置为2、5和3，则它们将按照2:5:3的比例分配父容器的高度。
以下代码展示了如何实现这个布局：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: column;
height: 100vh; /* 占据视口高度 */
/* 可选：垂直居中 */
align-items: center;
}
.section1 {
flex: 2;
}
.section2 {
flex: 5;
}
.section3 {
flex: 3;
}
请注意，父元素需要设置height: 100vh;以确保其占据整个视口高度，从而使子元素能够根据视口高度自适应调整。align-items: center; 使子元素在垂直方向上居中对齐，但这并非必须的。
对应的HTML结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS 代码同上 */
</style>
</head>
<body>
<div class="container">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
</div>
</body>
</html>
通过以上CSS代码和HTML结构，即可实现一个自适应不同分辨率的布局，三个子元素始终保持2:5:3的高度比例。
