CSS Flex Box技术咨询：实现每行项目数量不同的页面布局

嘿，你的思路方向完全没问题！已经把body设为flex容器并开启了换行，接下来只需要给各个区块设置合适的flex属性，就能轻松实现你想要的布局。我给你整理了完整的可落地方案：

第一步：先搭好清晰的HTML结构 #

确保你的页面结构层级明确，这样CSS才能精准控制：

<body>
  <header>header</header>
  <nav>nav</nav>
  <main>main</main>
  <footer>footer</footer>
</body>

第二步：补全CSS样式（含你的基础代码） #

基于你已经写的body样式，补充这些规则就能完美实现布局：

/* 你的基础设置 */
body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0; /* 去掉浏览器默认边距，避免页面出现横向滚动条 */
  min-height: 100vh; /* 可选：让页面占满整个视口高度，footer会自然推到页面底部 */
}

/* header和footer强制占满整行 */
header, footer {
  flex: 0 0 100%; 
  /* 拆解：flex-grow:0 不额外拉伸; flex-shrink:0 不被压缩; flex-basis:100% 宽度占满整行 */
  background: #f5f5f5; /* 加背景色方便区分，可按需自定义 */
  padding: 1.2rem;
}

/* nav固定宽度，不随页面缩放改变 */
nav {
  flex: 0 0 220px; /* 这里设置你想要的nav宽度，比如220px */
  background: #e8e8e8;
  padding: 1.2rem;
}

/* main自动填充剩余所有空间 */
main {
  flex: 1; /* flex-grow:1 会自动吃掉nav剩下的全部可用宽度 */
  background: #ffffff;
  padding: 1.2rem;
}

关键逻辑解释 #

• flex: 0 0 100%：让header和footer强制独占一行，因为flex-wrap: wrap会自动把它们换行到单独的行空间里。
• flex: 0 0 220px：固定nav的宽度，无论页面怎么缩放，它都保持设定的宽度（如果需要适配移动端，后续可以加媒体查询调整这个值）。
• flex: 1：main会自动填充nav剩余的所有水平空间，实现“nav+main并排，main占满剩余宽度”的效果。

如果想让footer始终固定在页面底部（哪怕main内容很少），只需要给body加一行justify-content: space-between，这样header顶在最上方，footer压在最底部，中间的nav和main会被自动推到中间区域。

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