如何将中间元素包裹在固定的左右元素周围？

Question

我有一个仪表板，左上角有一个标题，右上角有一些设置按钮，并且根据页面的不同，中间有可变数量的 div。我希望设置按钮和 div 只要有空间就可以右对齐，并且当它们不再有空间可以在一行中时，我希望中间 div 开始在第一行下方换行。

Here's a rough diagram of what I was imagining

._left {
overflow: hidden;
margin-right: auto;
}

._right {
position: absolute;
top: 0;
right: 0;

如果有人可以提供任何提示，那就太棒了。我不知道如何完成这项工作。

Answer 1

它可能不优雅，但我可能会在右侧创建一个 6x2 网格，您的绿色框可以跨越两列。然后使用媒体查询一次将一个框更改为第二行。