使 CSS 网格或 Flex 项目大小相等，并在其之间拉伸分隔符

Question

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

• 工具的数量是动态的

• 所有工具应具有相同的宽度（基于最宽的工具）

• 工具可以通过分隔符分隔，该分隔符占用所有可用空间（拉伸）

• 分隔符可以放置在任何地方

• html无法更改

预期输出（给定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系统，如果不指定 a ，我就无法获取分隔符grid-template-columns，这是我想避免的。我需要一些动态的东西。

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>

如果没有 CSS 解决方案，我愿意接受 JavaScript 解决方案。感谢您的帮助。

Answer 1

通过 javascript ，您可以循环遍历 .item 并查找最宽的，然后更新自定义 css 属性。通过 js 和 flex 的可能示例var bigW = "0";for (let e of document.querySelectorAll("nav .item")) {&nbsp; elW = e.offsetWidth;&nbsp; if (elW > bigW) {&nbsp; &nbsp; bigW = elW;&nbsp; }&nbsp; document.documentElement.style.setProperty("--myW", bigW + 1 + "px");}nav {&nbsp; display: flex;&nbsp; background: #e8e8e8;&nbsp; width: 100%;}.item {&nbsp; min-width: var(--myW, 3em);&nbsp; text-align: center;}.separator {&nbsp; flex: 1;&nbsp; background: #d3d3d3;}nav div+div {&nbsp; border-left: solid;}<nav>&nbsp; <div class="item">A</div>&nbsp; <div class="item">BBB</div>&nbsp; <div class="item">CC</div>&nbsp; <div class="separator"></div>&nbsp; <div class="item">D</div></nav>从下面的评论编辑var bigW = "0";for (let e of document.querySelectorAll("nav > div")) {&nbsp; elW = e.offsetWidth;&nbsp; if (elW < 7) {// includes partially possible border and padding, mind it&nbsp; &nbsp; e.style.flexGrow = 1;&nbsp; } else if (elW > bigW) {&nbsp; &nbsp; bigW = elW;&nbsp; }}document.documentElement.style.setProperty("--myW", bigW + 1 + "px");nav {&nbsp; display: flex;&nbsp; background: #e8e8e8;}.item {&nbsp; min-width: var(--myW, 0);&nbsp; text-align: center;&nbsp; border: solid 1px;}.separator {&nbsp; background: #d3d3d3;}<nav>&nbsp; <div class="item">A</div>&nbsp; <div class="item">BBBBBBBB</div>&nbsp; <!--<div class="separator"></div>-->&nbsp; <div class="item">CC</div>&nbsp; <div class="separator"></div>&nbsp; <div class="item">D</div></nav>