如何在具有可拉伸弹性盒的盒子的每一侧各有 4 个“托盘”？

Question

有一个主 div (#root)，其中我需要 4 个内部 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: 48px;  width: 100%;}.tray-bottom {  height: 48px;  width: 100%;  align-self: flex-end;}.tray-left {  width: 48px;}.tray-right {  width: 48px;}<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>现在我想left在和right之间充分伸展。topbottom请注意，所有托盘都有固定宽度（左、右）或固定高度（顶部、底部）。我会避免在现有的 div 中嵌套更多的 div。Flexbox 不是必须的，但我发现与其他可能性相比，它很简单且面向未来。

Answer 1

一个简单的浮动配置可以在没有弹性盒的情况下做到这一点：

html,

body {

  height: 100%;

  margin: 0;

  text-align: center;

}

#root {

  background-color: blue;

  height: 100%;

}

.tray {

  box-sizing: border-box;

  background-color: red;

  border: thin solid black;

}

.tray-top,

.tray-bottom {

  height: 48px;

  line-height:48px;

  clear: both;

}

.tray-left,

.tray-right {

  width: 48px;

  height: calc(100% - 96px);

  float: left;

}

.tray-right {

  float: right;

}

/* to align vertically the content */

.tray-left::before,

.tray-right::before {

  content:"";

  display:inline-block;

  height:50%;

}

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

Answer 2

CSS-Grid 可以做到这一点：

html {

  height: 100%;

}

body {

  height: 100%;

  margin: 0;

  text-align: center;

}

#root {

  background-color: blue;

  display: grid;

  grid-template-columns: auto 1fr auto;

  grid-template-rows: auto 1fr auto;

  height: 100%;

}

.tray {

  box-sizing: border-box;

  background-color: red;

  border: thin solid black;

}

.tray-top {

  height: 48px;

  grid-column: 1 / -1;

}

.tray-bottom {

  height: 48px;

  grid-column: 1 / -1;

}

.tray-left {

  width: 48px;

}

.tray-right {

  width: 48px;

  grid-column:3;

}

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