使 CSS 网格或弹性项目大小相等，并在它们之间拉伸分隔符

Question

我尝试构建一个动态工具栏，其中：

• 工具的数量是动态的
• 所有工具应具有相同的宽度（基于最宽的）
• 工具可以通过占用所有可用空间的分隔符分隔（拉伸）
• 分隔符可以放在任何地方
• html 无法更改

预期的 output（给定BBB最宽的工具）：

—————————————————————————————————————————————————————
| A |BBB| CC|            SEPARATOR              | D |
—————————————————————————————————————————————————————

柔性

我尝试使用flex方法，我无法组合所有规则：

• 分隔符占用所有空间但工具宽度不相等：

—————————————————————————————————————————————————————
|A|BBB|CC|       SEPARATOR                        |D|
—————————————————————————————————————————————————————

 nav { display: flex; background: #e8e8e8; width: 100%; }.item { flex: 1; text-align: center; }.separator { width: 100%; background: #d3d3d3; }

 <nav> <div class="item">A</div> <div class="item">BBB</div> <div class="item">CC</div> <div class="separator"></div> <div class="item">D</div> </nav>

• 所有工具（包括分隔符）都具有相同的宽度：

—————————————————————————————————————————————————————
|    A    |   BBB   |    CC   | SEPARATOR |    D    |
—————————————————————————————————————————————————————

 nav { display: flex; background: #e8e8e8; width: 100%; }.item { flex: 1; text-align: center; }.separator { flex: 1; background: #d3d3d3; }

 <nav> <div class="item">A</div> <div class="item">BBB</div> <div class="item">CC</div> <div class="separator"></div> <div class="item">D</div> </nav>

网格

使用grid系统，如果不指定我想避免的grid-template-columns ，我将无法获得分隔符。 我需要一些动态的东西。

 nav { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; background: #e8e8e8; width: 100%; }.item { text-align: center; }.separator { justify-self: stretch; background: #d3d3d3; }

 <nav> <div class="item">A</div> <div class="item">BBB</div> <div class="item">CC</div> <div class="separator"></div> <div class="item">D</div> </nav>

如果没有 CSS 解决方案，我对 JavaScript 解决方案持开放态度。 谢谢您的帮助。

Answer 1

通过 javascript，您可以遍历.item 并查找最宽的，然后更新自定义 css 属性。

通过 js 和 flex 的可能示例

 var bigW = "0"; for (let e of document.querySelectorAll("nav.item")) { elW = e.offsetWidth; if (elW > bigW) { bigW = elW; } document.documentElement.style.setProperty("--myW", bigW + 1 + "px"); }

 nav { display: flex; background: #e8e8e8; width: 100%; }.item { min-width: var(--myW, 3em); text-align: center; }.separator { flex: 1; background: #d3d3d3; } nav div+div { border-left: solid; }

 <nav> <div class="item">A</div> <div class="item">BBB</div> <div class="item">CC</div> <div class="separator"></div> <div class="item">D</div> </nav>

---

从下面的评论中编辑

 var bigW = "0"; for (let e of document.querySelectorAll("nav > div")) { elW = e.offsetWidth; if (elW < 7) {// includes partially possible border and padding, mind it e.style.flexGrow = 1; } else if (elW > bigW) { bigW = elW; } } document.documentElement.style.setProperty("--myW", bigW + 1 + "px");

 nav { display: flex; background: #e8e8e8; }.item { min-width: var(--myW, 0); text-align: center; border: solid 1px; }.separator { background: #d3d3d3; }

 <nav> <div class="item">A</div> <div class="item">BBBBBBBB</div> <!--<div class="separator"></div>--> <div class="item">CC</div> <div class="separator"></div> <div class="item">D</div> </nav>