如何用Flexbox实现移动端优先的20:50:30垂直分栏全屏布局？

要实现移动端优先、基于Flexbox的响应式布局，让三个区块按20:50:30的比例垂直占满屏幕高度，只需在现有HTML基础上添加以下CSS样式：

核心CSS代码 #

/* 重置默认边距，消除多余留白 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 让根元素和body占满屏幕高度 */
html, body {
  height: 100%;
}

/* main容器同步占满高度，作为父容器的载体 */
main {
  height: 100%;
}

/* 父容器启用Flex布局，设置子元素垂直排列 */
.parent {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 按比例分配各区块高度 */
.topSection {
  flex: 2; /* 占比2/10 → 20% */
  background-color: #f0f0f0; /* 可选：添加背景色区分区块 */
}

.middleSection {
  flex: 5; /* 占比5/10 → 50% */
  background-color: #e0e0e0; /* 可选：添加背景色区分区块 */
}

.bottomSection {
  flex: 3; /* 占比3/10 → 30% */
  background-color: #d0d0d0; /* 可选：添加背景色区分区块 */
}

实现说明 #

• 移动端优先：基础样式直接适配移动端，无需额外媒体查询，后续若需针对桌面端调整布局，可按需添加@media规则扩展。
• 占满屏幕高度：通过设置html、body、main、.parent的height: 100%，确保布局从屏幕顶部延伸到底部。
• Flex比例控制：利用flex属性分配空间，flex: n中的数值对应区块的占比权重，总权重为10（2+5+3），刚好对应20%、50%、30%的比例。
• 响应式特性：Flexbox会自动适配不同屏幕高度，区块高度随屏幕尺寸等比例缩放。

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Vertical Layout</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
    }

    main {
      height: 100%;
    }

    .parent {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .topSection {
      flex: 2;
      background-color: #f0f0f0;
      padding: 1rem;
    }

    .middleSection {
      flex: 5;
      background-color: #e0e0e0;
      padding: 1rem;
    }

    .bottomSection {
      flex: 3;
      background-color: #d0d0d0;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <main>
    <div class="parent">
      <div class="topSection">
        This is Top Section
      </div>
      <div class="middleSection">
        This is Middle Section
      </div>
      <div class="bottomSection">
        This is Bottom Section
      </div>
    </div>
  </main>
</body>
</html>

内容的提问来源于stack exchange，提问作者Hashir Hussain