小编San*_*ues的帖子
如何在可包装的 flexbox 中使所有项目的宽度相同？
我在一个可包装的flex盒子里有一个宽度可变的项目列表。
我希望所有项目都具有相同的宽度，因此我应用了以下 CSS 属性：flex-basis: 0和flex-grow: 1. 这样，每列中的每个项目都应该具有相同的宽度，与其原始宽度无关。
这是预期的结果，可以通过使用flex-basis: 30%.
不幸的是，这并不适用于所有情况（如果每个项目的宽度很小，就会有很多空白空间）。
使用固定宽度并不能解决问题，因为每个项目可能占用不同的空间。
这可以帮助说明问题，“大项目”创建 5 行（每个项目的宽度为 33%），而“小项目”仅创建 3 行（每个项目的宽度为 20%）。
我也不允许使用 JavaScript。
ul {
display: flex;
flex-wrap: wrap;
}
li {
white-space: nowrap;
flex-basis: 0;
flex-grow: 1;
}<ul>
<li>Short name</li>
<li>Short name</li>
<li>Short name</li>
<li>Short name</li>
<li>Short name</li>
<li>Short name</li>
<li>Short name</li>
<li>Short name</li>
<li>Long long long name</li>
<li>Short name</li>
<li>Short name</li>
<li>Long long long name</li>
<li>Long long long name</li>
<li>Long long long …4
推荐指数
推荐指数
1
解决办法
解决办法
6765
查看次数
查看次数