HTML+CSS 中的动态 3 列布局：侧列相等和最大，中间列最小和驱动布局？

Question

我想要一个三列布局，完全动态的(没有固定的宽度)，其中左列和右列的宽度相等，并在两者之间，扩大以填补所有可用的空间后中间列已作出的宽度，因为它需要容纳其内容。换句话说，我希望中间列是动态的并驱动宽度，我希望它位于页面的中心，并且具有最小的内容宽度，并且我希望两个边列的宽度和最大值相等，给定中间列的宽度。

在实践中，中间列的宽度将是很小的，想象一个小单词，如"one_answers">

理想情况下，我希望这能够被编码为三个连续的元素:

<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>

这样我就可以很容易地在窄布局中折叠布局，比如移动，使其垂直方向，一个div在另一个下面。

任何想法?我惊讶于这看起来有多么困难，我想知道答案是否如此简单，我只是有一个随机的空白，没有看到它，或者如果这真的很棘手。

Answer 1

如果用'display:flex'将三个div放在一个容器中你可以达到我认为你所追求的。

简单地给'left'和'right'一个'width: 100%'，这样它们就可以以相同的比例拉伸到尽可能远的地方，中间的一个只得到所需的大小。(如果你想要另一个比例在不同的时间-也许右边的应该是左边的两倍大-简单地输入100%和200%的宽度-宽度可能大于100%，这样很容易计算比例)

注意，如果你有多个单词，行就会断行。为了防止这种情况发生，我在中间设置了'flex-shrink: 0'(也可以设置为'white-space: nowrap')。如果只有一个单词，或者你想要换行，你甚至可以留下这些。

#wrapper {
display: flex;
}
#wrapper>* {
border: 1px solid teal;
}
.left,
.right {
width: 100%;
}
#middle {
flex-shrink: 0;
/* white-space: nowrap; */
}

<div id="wrapper">
<div class="left"></div>
<div id="middle">two words</div>
<div class="right"></div>
</div>

这是使用'display:grid'的替代方法

max-content使列在不换行空格的情况下按需要变大(因此，如果有两个单词，它们将留在同一行)

设置外部列为1fr使它们大小相同，并且都占用尽可能多的空间

#wrapper {
display: grid;
grid-template-columns: 1fr max-content 1fr;
}
#wrapper>* {
border: 1px solid teal;
}

<div id="wrapper">
<div class="left"></div>
<div id="middle">two words</div>
<div class="right"></div>
</div>