如何在具有可拉伸弹性盒的盒子的每一侧各有 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 {&nbsp; height: 100%;&nbsp; margin: 0;&nbsp; text-align: center;}#root {&nbsp; background-color: blue;&nbsp; height: 100%;}.tray {&nbsp; box-sizing: border-box;&nbsp; background-color: red;&nbsp; border: thin solid black;}.tray-top,.tray-bottom {&nbsp; height: 48px;&nbsp; line-height:48px;&nbsp; clear: both;}.tray-left,.tray-right {&nbsp; width: 48px;&nbsp; height: calc(100% - 96px);&nbsp; float: left;}.tray-right {&nbsp; float: right;}/* to align vertically the content */.tray-left::before,.tray-right::before {&nbsp; content:"";&nbsp; display:inline-block;&nbsp; height:50%;}<div id="root">&nbsp; <div class="tray tray-top">top</div>&nbsp; <div class="tray tray-left">left</div>&nbsp; <div class="tray tray-right">right</div>&nbsp; <div class="tray tray-bottom">bottom</div></div>

Answer 2

CSS-Grid 可以做到这一点：html {&nbsp; height: 100%;}body {&nbsp; height: 100%;&nbsp; margin: 0;&nbsp; text-align: center;}#root {&nbsp; background-color: blue;&nbsp; display: grid;&nbsp; grid-template-columns: auto 1fr auto;&nbsp; grid-template-rows: auto 1fr auto;&nbsp; height: 100%;}.tray {&nbsp; box-sizing: border-box;&nbsp; background-color: red;&nbsp; border: thin solid black;}.tray-top {&nbsp; height: 48px;&nbsp; grid-column: 1 / -1;}.tray-bottom {&nbsp; height: 48px;&nbsp; grid-column: 1 / -1;}.tray-left {&nbsp; width: 48px;}.tray-right {&nbsp; width: 48px;&nbsp; grid-column:3;}<div id="root">&nbsp; &nbsp; <div class="tray tray-top">top</div>&nbsp; &nbsp; <div class="tray tray-left">left</div>&nbsp; &nbsp; <div class="tray tray-right">right</div>&nbsp; &nbsp; <div class="tray tray-bottom">bottom</div></div>