使用CSS Flexbox构建不同分辨率下高度比例为2:5:3的自适应布局

本文将演示如何在PC端利用CSS Flexbox创建高度自适应的布局，其子元素高度比例始终保持2:5:3，并完美兼容各种屏幕分辨率。 这只需简单的Flexbox属性即可实现。

我们的目标是将一个容器分成三个子元素，并按2:5:3的比例分配高度。 无论容器高度如何变化，子元素的高度比例都应保持不变。

解决方案的关键在于Flexbox布局的flex属性。 通过设置父元素的display: flex和flex-direction: column，我们将父元素的主轴方向设置为垂直方向，使子元素垂直排列。

立即学习“前端免费学习笔记（深入）”；

Academic Reader

PDF转Markdown转换器——从PDF文件提取文本、表格和公式，生成干净的Markdown。适用于PDF文档转换、内容提取、解析等场景。

下载

接下来，为每个子元素设置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布局。