如何用Flexbox实现容器四边固定面板并保持扁平DOM层级？

当然有办法用Flexbox实现同级元素的十字布局，而且完全不需要绝对定位或者混乱的嵌套层级。我给你两种思路：一种是严格满足扁平DOM的纯Flex方案，另一种是优化你现有嵌套方案的结构，让层级更清晰。

方案一：扁平DOM的纯Flexbox实现 #

这个方案完全依赖Flexbox的flex-wrap和order属性，四个面板都是同级元素，没有任何嵌套，也不会出现重叠问题：

CSS代码 #

html, body {
  height: 100%;
  margin: 0;
}

#root {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  /* 确保换行后的元素对齐容器顶部 */
  align-content: flex-start;
  gap: 0; /* 如果需要间距可以调整这个值 */
}

.tray {
  box-sizing: border-box;
  border: thin solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tray-top {
  width: 100%;
  height: 20%;
  order: 1; /* 控制显示顺序，让顶部先出现 */
  background-color: #ff6b6b;
}

.tray-bottom {
  width: 100%;
  height: 20%;
  order: 3; /* 底部最后显示 */
  background-color: #4ecdc4;
}

.tray-left {
  width: 10%;
  height: 60%;
  order: 2; /* 中间行的左侧 */
  background-color: #ffe66d;
}

.tray-right {
  width: 90%;
  height: 60%;
  order: 2; /* 和左侧同属中间行，按DOM顺序排列 */
  background-color: #1a535c;
  color: white;
}

HTML代码（完全扁平） #

<div id="root">
  <div class="tray tray-top">top</div>
  <div class="tray tray-left">left</div>
  <div class="tray tray-right">right</div>
  <div class="tray tray-bottom">bottom</div>
</div>

原理说明：

• 容器#root开启flex-wrap: wrap，允许元素换行；align-content: flex-start确保换行后的行不会拉伸。
• 顶部和底部面板设置width: 100%，强制占满一行，高度固定为20%。
• 左右面板高度设为60%（刚好是100% - 20%*2），宽度分别为10%和90%，通过order: 2让它们排在上下面板之间，形成中间行。
• 所有元素都是同级，DOM结构完全扁平，Flexbox会自动处理布局，不会出现绝对定位的重叠问题。

方案二：优化嵌套Flex的层级结构 #

如果你的业务场景允许轻微的层级嵌套（其实这种嵌套是语义化的，完全合理），可以把中间的左右面板放在一个专门的容器里，让整体结构更清晰，避免混乱：

CSS代码 #

html, body {
  height: 100%;
  margin: 0;
}

#root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tray {
  box-sizing: border-box;
  border: thin solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tray-top, .tray-bottom {
  flex: 0 0 20%; /* 固定高度20%，不拉伸不收缩 */
}

.tray-top { background-color: #ff6b6b; }
.tray-bottom { background-color: #4ecdc4; }

.middle-container {
  flex: 1; /* 占满剩余的60%高度 */
  display: flex;
}

.tray-left {
  flex: 0 0 10%; /* 固定宽度10% */
  background-color: #ffe66d;
}

.tray-right {
  flex: 1; /* 占满剩余宽度 */
  background-color: #1a535c;
  color: white;
}

HTML代码（语义化嵌套） #

<div id="root">
  <div class="tray tray-top">top</div>
  <div class="middle-container">
    <div class="tray tray-left">left</div>
    <div class="tray tray-right">right</div>
  </div>
  <div class="tray tray-bottom">bottom</div>
</div>

优化点：

• 用middle-container专门包裹左右面板，DOM结构清晰，一眼就能看出布局的三个部分：顶部、中间、底部。
• 利用flex: 1让中间容器自动占满剩余高度，不需要手动计算60%，适配性更强。
• 嵌套层级只有一层，完全可控，不会出现混乱的结构。

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