使 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")) {

  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>