我设法让CSS3 几乎做我想要的事情：
.top-middle容器具有任意宽度，并且必须始终与父容器的上边缘（<main>）保持齐平。.top-middle容器的正下方。 （如果两个紫色容器同时掉落会很好，但我会住在其中一个容器旁边的中间容器，当有空间时。）<main>容器的最小宽度应基本上是.top-middle容器的宽度.top-middle容器应居中，理想情况下相对于父容器（<main>），但至少相对于可用的水平空间（在 left <之间） / em>和正确容器） 这是最后一项要求，＃5，我没有管理过。
我不想使用JavaScript，当然，它需要是一个跨浏览器的解决方案。 （我并不真正关心IE＆lt; 11，尽管使用那种技术的人比我的CSS看起来更漂亮有更大的担忧！）
N.B。此问题不能（AFAIK）在jsfiddle，StackOverflow的代码段功能或任何其他固定宽度环境中进行测试。请复制我的代码并将其粘贴到一个文件中，并观察当您扩大或缩小浏览器窗口时会发生什么。
这是我的完整代码，为您的复制和粘贴乐趣：
main div {
white-space: nowrap;
color: white;
}
.top-container {
background: olive;
}
.top-middle {
background: grey;
}
.top-left,
.top-right {
background: purple;
}
.bottom-container {
background: blue;
text-align: center;
}
/* The crux of the layout starts here */
main {
height: 300px;
display: flex;
flex-direction: column;
}
.top-container>* {
display: inline-block;
padding: 1em;
}
.top-left {
float: left;
}
.top-right {
float: right;
}
.spacer {
background: silver;
flex-grow: 1;
}<main>
<div class="top-container">
<div class="top-middle">
This should be centred, and always stay on top.
<em>Left</em> and <em>right</em> should drop when the window contracts.
</div>
<div class="top-left">left</div>
<div class="top-right">right</div>
</div>
<div class="spacer"></div>
<div class="bottom-container">This is the bottom.</div>
</main>