能否为body应用Flexbox实现页面元素垂直分布？问题排查

问题根源 #

你给body设置了Flexbox属性，但**header、content、footer是.page-container的子元素，并非body的直接子元素**，因此body的flex规则根本无法作用到这三个目标元素上，自然不会产生预期的垂直分布效果。

解决方案 #

将Flexbox容器的层级调整到.page-container上，让它成为弹性容器，同时设置高度占满屏幕，再通过flex属性让中间的content区域自动填充剩余空间，实现上下固定、中间自适应的布局。

修改后的完整CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
  margin: 0;
  overflow: hidden;
  font-family: Roboto, sans-serif;
}

/* 核心改动：让.page-container成为弹性容器 */
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 占满屏幕高度 */
}

img {
  width: 600px;
}

button {
  font-family: Roboto, sans-serif;
  border: none;
  border-radius: 8px;
  background: #eee;
}

input {
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 8px 24px;
  width: 400px;
  margin-bottom: 16px;
}

li {
  list-style-type: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.header {
  display: flex;
  justify-content: space-between;
}

.left-links,
.right-links {
  padding-left: 8px;
  padding-right: 8px;
  display: flex;
  gap: 5px;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 让内容在中间区域垂直居中 */
  flex: 1; /* 自动填充header和footer之间的剩余空间 */
}

.footer {
  display: flex;
  justify-content: space-between;
  background-color: #eeeeee;
}

关键改动说明 #

1. 移除body中重复的flex设置，给.page-container添加display: flex和flex-direction: column，让它的子元素（header、content、footer）成为弹性项。
2. 给.page-container设置height: 100vh，确保它占满整个屏幕高度。
3. 给.content添加flex: 1，让它自动拉伸填充header和footer之外的剩余空间；同时用justify-content: center让内容在中间区域垂直居中。

调整后，header固定在顶部，footer固定在底部，中间的content区域填满剩余空间，完全符合你想要的垂直分布效果。

内容的提问来源于stack exchange，提问作者Nour Samkough