通过弹性框

Question

如何使用弹性框强制平均分配宽度，而不考虑其内部的内容大小？

我有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

使用flex-basis属性。 （这个答案是在问题更新之前发布的。）

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 33.33%;              /* adjusted */
  overflow: hidden;              /* new */
  box-sizing: border-box;        /* new */
}

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

Answer 2

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>

Answer 3

我知道回复已经很晚了。但想到放在这里，因为它可能会帮助别人。

只需将width:0添加到li（子）元素即可实现。请看我的片段。

参考：http://www.sumnoise.com/2016/04/06/equal-width-flexbox-columns/

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;
  width: 0; // Fix for having equal widths for all children
  //Below are just to wrap the text overflowing 
  flex-wrap: wrap;
  word-break: break-word;
}

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