如何为嵌套元素应用CSS flex属性？附相关代码示例

嘿，我来帮你搞定嵌套元素的Flex布局问题！先理清楚你的DOM结构：最外层.site是Flex容器，里面包含header、.content（嵌套了.inside，而.inside又有#first和#last），还有footer。你已经把.site设置成了垂直方向的Flex布局来实现头尾固定、中间内容占满剩余空间，这个思路是对的，接下来只要给嵌套的内层容器也加上Flex属性就行。

完整修改后的代码 #

首先是你的HTML结构（保持不变）：

<div class="site"> 
  <header> This is my header </header> 
  <div class="content"> 
    <div class="inside"> 
      <div id="first"> 第一个嵌套元素 </div> 
      <div id="last"> 第二个嵌套元素 </div> 
    </div> 
  </div> 
  <footer> This is my footer </footer> 
</div>

然后是补充后的CSS代码，我加了注释说明每个部分的作用：

/* 全局重置，去掉默认边距避免布局偏差 */
body {
  margin: 0;
}

header { 
  background-color: blue;
  padding: 1rem; /* 加内边距让内容不贴边 */
  color: white;
} 

footer { 
  background-color: brown;
  padding: 1rem;
  color: white;
} 

/* 最外层Flex容器，实现垂直布局，占满视口高度 */
.site { 
  display: flex; 
  min-height: 100vh; 
  flex-direction: column; 
} 

/* 中间内容区，占满.site的剩余垂直空间 */
.content { 
  flex: 1; 
  /* 这里去掉了原代码的height:90px，因为flex:1已经让它自动填充剩余空间，固定高度会冲突 */
  background-color: #f0f0f0;
  padding: 1rem;
}

/* 给嵌套的.inside容器设置Flex布局，让它的子元素变成Flex项目 */
.inside {
  display: flex;
  min-height: 100%; /* 让.inside占满.content的高度 */
  gap: 1rem; /* 子元素之间的间距，比margin更简洁可控 */
}

/* 第一个嵌套元素，分配2份空间 */
#first {
  flex: 2;
  background-color: lightgreen;
  padding: 1rem;
}

/* 第二个嵌套元素，分配1份空间 */
#last {
  flex: 1;
  background-color: lightblue;
  padding: 1rem;
}

关键知识点说明 #

• 内层容器必须设置display: flex：只有当父元素是Flex容器时，子元素才能使用Flex相关属性（比如flex、justify-content、align-items等）。所以给.inside加上display: flex是核心步骤。
• 避免固定高度冲突：原代码里.content的height:90px会限制它的高度，而flex:1的作用是让它填充.site的剩余垂直空间，两者同时存在会导致布局不符合预期，所以建议去掉固定高度。
• 空间分配与对齐：
  • 用flex: 数值可以控制Flex项目的空间占比，比如上面的#first占2份、#last占1份，它们会按这个比例分配.inside的可用空间。
  • 如果想让子元素垂直居中，给.inside加align-items: center；想水平居中就加justify-content: center；如果要让子元素纵向排列，给.inside加flex-direction: column即可。

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