html - 通过 flex box 严格平均动态分配宽度

Question

如何使用 flex box 强制宽度均匀分布而不考虑其内部内容的大小？

我有一个 ul 元素，它包含三个必须等宽的 li 元素。正如您在演示中所见，使用 flex: 1 0 0 无法正常工作。第三个 li 元素占据了所有空间。

更新 该列表是动态创建的，使用 Javascript 计算百分比不是我想要的。

ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: #F00;
  padding: 2px;
  margin: 0;
  box-sizing: border-box;
}

li {
  background-color: #eee;
  border: 1px solid #000;
  flex: 1 0 0;
}

<ul>
<li>AAAAAAA</li>
<li>BBB</li>
<li>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</li>
</ul>

Answer 1

Flexbox 做不到，但还有另一种选择。

CSS 表格

当然，如果文本太长会溢出，我们可以用word-break:break-all来解决。

ul {
  list-style: none;
  display: table;
  width: 100%;
  background-color: #F00;
  padding: 2px;
  margin: 0;
  margin-bottom: 10px;
  box-sizing: border-box;
  table-layout: fixed;
}
li {
  display: table-cell;
  background-color: #eee;
  border: 1px solid #000;
  word-break: break-all;
}

<ul>
  <li>AAAAAAA</li>
  <li>BBB</li>
  <li>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</li>
</ul>


<ul>
  <li>AAAAAAA</li>
  <li>BBB</li>
  <li>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</li>
  <li>DDDDDDDDDDDDDDDDDD</li>
</ul>