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

【问题标题】：Dynamic 3 Column Layout in HTML+CSS: Side Columns Equal & Maximal, Middle Column Minimal & Driving the Layout?HTML+CSS 中的动态 3 列布局：侧列相等且最大，中间列最小并驱动布局？
【发布时间】：2021-10-29 20:47:47
【问题描述】：

我想要一个三列布局，完全动态（没有固定宽度），其中左右列的宽度相等，并且在它们两者之间，展开以填充所有可用空间之后中间栏的宽度已尽可能宽以容纳其内容。换句话说，我希望中间列是动态的并驱动宽度，并且我希望它在页面上居中并且其内容的宽度最小，并且我希望两侧列的宽度和最大值相等，给定中间列的宽度。

在实践中，中间列的宽度会变小，想象一下像“and”或“or”这样的小词，位于两个大小相等且独立于内容的框之间。

理想情况下，我希望能够使用三个连续的元素对其进行编码：

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

这样我就可以轻松地折叠狭窄布局（如移动设备）上的布局，使其垂直朝向，一个 div 在另一个下方。

有什么想法吗？我对这看起来有多么困难感到惊讶，我想知道答案是否如此简单以至于我只是随机出现一个空白而没有看到它，或者这是否真的很棘手。

【问题讨论】：

看看flexbox
@Corrl 我一直在使用 flexbox 并愿意这样做，但无法弄清楚，这就是我问这个问题的原因。我在网上找到的所有示例都具有固定宽度的右列或左列，或固定宽度的中间。
不知道您是否收到通知我编辑了我的答案...刚刚通过“显示：网格”添加了替代方式，这可能也是一个有趣的解决方案

标签： html css multiple-columns

【解决方案1】：

如果您将三个 div 放在一个带有 'display:flex' 的容器中，您可以实现我认为您所追求的。

只需给 '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>

【讨论】：