在一行中具有可变宽度的等距 DIV

Question

我有未知数量的 div（有时 3 个，有时 6 个），它们的宽度可变。

ul,
li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#navigation ul {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
#navigation li {
  background-color: yellow;

}
#navigation li:hover {
  background-color: red;
}

<div id="navigation">
  <ul>
    <li>E01</li>
    <li>Element02</li>
    <li>Ele03</li>
  </ul>
</div>

上面的例子展示了它的基本工作原理。但我需要的是一种方法，让元素在两个元素之间左右填充 space 宽度的一半，这样基本上黄色背景就会接触到它旁边的一个元素。但我不知道如何实现。

我尝试了很多方法。 (flexbox, table-cell, floats) 但我从来没有找到一种方法。

Answer 1

在 li 上使用 flex-grow 属性。这不会添加填充，但会强制 flex 项目增加宽度以填充 space。然后您可以根据需要调整内容。参见 w3 schools。

例如：

ul,
li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#navigation ul {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
#navigation li {
  background-color: yellow;
  flex-grow: 1;
  text-align: center;
}
#navigation li:hover {
  background-color: red;
}

<div id="navigation">
  <ul>
    <li>E01</li>
    <li>Element02</li>
    <li>Ele03</li>
  </ul>
</div>

在一行中具有可变宽度的等距 DIV

Equally-spaced DIVs with variable width in one line

html

css

flexbox