html - 一个 flexbox 布局，其中一个元素固定到容器的每一侧

Question

我希望使用 flexbox 创建一个类似于下面代码片段的布局，并保持一个平面层次结构——这意味着所有四个 Pane 都是兄弟。

我的第一个解决方案使用绝对定位，它不是 flexbox 并且不能在 Pane 之间提供良好的协同作用(重叠、“欠重叠”等)。

我的第二个解决方案使用 flexbox，但使用 3 行，左右 Pane 都在中间行，顶部和底部 Pane 在它们自己的行中，所以层次结构有点困惑。

有没有办法做到这一点？如果不是，我应该如何最好地缓解第二种解决方案的困惑层次结构？

解决方案 #1(绝对位置， Pane 不能很好地啮合):

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  text-align: center;
}

#root {
  background-color: blue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.tray {
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  box-sizing: border-box;
  position: absolute;
  background-color: red;
  border: thin solid black;
}

.tray-top {
  top: 0%;
  height: 20%;
  width: 60%;
}

.tray-bottom {
  bottom: 0%;
  height: 20%;
  width: 60%;
}

.tray-left {
  left: 0%;
  height: 60%;
  width: 10%;
}

.tray-right {
  right: 0%;
  height: 60%;
  width: 10%;
}

<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>

解决方案 #2(具有嵌套层次结构的 flexbox):

html {
  height: 100%;
}

body {
  background-color: tan;
  height: 100%;
  margin: 0;
  text-align: center;
}

#root {
  background-color: blue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  height: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}

.row-top {
  flex-basis: 40px;
}

.row-middle {
  flex-grow: 1;
  justify-content: space-between;
}

.row-bottom {
  flex-basis: 40px;
}

.pane {
  box-sizing: border-box;
  display: flex;
  background-color: red;
  border: thin solid black;
  flex-basis: 40px;
}

.pane-top {
  flex-basis: 60%;
}

.pane-bottom {
  flex-basis: 60%;
}

.pane-left {
  /* align-self: flex-start; */
}

.pane-right {
  /* align-self: flex-end; */
}

<div id="root">
  <div class="row row-top">
    <div class="pane pane-top">top</div>
  </div>
  <div class="row row-middle">
    <div class="pane pane-left">left</div>
    <div class="pane pane-right">right</div>
  </div>
  <div class="row row-bottom">
    <div class="pane pane-bottom">bottom</div>
  </div>
</div>

Answer 1

只需将方向更改为行并添加环绕即可:

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  text-align: center;
}

#root {
  background-color: blue;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
}

.tray {
  box-sizing: border-box;
  background-color: red;
  border: thin solid black;
}

.tray-top {
  height: 20%;
  width: 100%;
}

.tray-bottom {
  height: 20%;
  width: 100%;
}

.tray-left {
  height: 60%;
  width: 10%;
}

.tray-right {
  height: 60%;
  width: 10%;
}

<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>

根据评论 - 用边距填充剩余宽度:

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  text-align: center;
}

#root {
  background-color: blue;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
}

.tray {
  box-sizing: border-box;
  background-color: red;
  border: thin solid black;
}

.tray-top {
  height: 20%;
  width: 60%;
  margin: 0 20%;
}

.tray-bottom {
  height: 20%;
  width: 50%;
  margin: 0 25%;
}

.tray-left {
  height: 60%;
  width: 10%;
}

.tray-right {
  height: 60%;
  width: 10%;
}

<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>