javascript - 使 CSS 网格或 Flex 元素大小相等，并在其之间拉伸(stretch)分隔符

Question

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

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

预期输出(给定 BBB 最广泛的工具):

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

flex

我尝试使用 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>