我目前有这个简单的FlexBox布局：
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
}
li {
flex-grow: 1;
padding: 20px;
margin: 10px;
background: #ddd;
}
<ul>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>consectetur</li>
<li>adipisicing</li>
<li>elit</li>
<li>sed</li>
<li>do</li>
<li>eiusmod</li>
<li>tempor</li>
<li>incididunt</li>
<li>ut</li>
<li>labore</li>
<li>et</li>
<li>dolore</li>
<li>magna</li>
<li>aliqua</li>
</ul>
我想要我的元素填充容器宽度(如现在),但最后一行留下对齐.如你所见,最后一行尝试填补空格,这有时会使最后一个元素得到一个丑陋的宽度.
FlexBox是否允许我们这样做？我找不到办法.
解决方法
您可以添加一个:: after伪元素与一个巨大的flex-grow,以便flex-grow：1元素的元素将是微不足道的：
ul::after {
content: '';
flex-grow: 1000000000;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
}
li {
flex-grow: 1;
padding: 20px;
margin: 10px;
background: #ddd;
}
ul::after {
content: '';
flex-grow: 1000000000;
}
<ul> <li>lorem</li> <li>ipsum</li> <li>dolor</li> <li>sit</li> <li>amet</li> <li>consectetur</li> <li>adipisicing</li> <li>elit</li> <li>sed</li> <li>do</li> <li>eiusmod</li> <li>tempor</li> <li>incididunt</li> <li>ut</li> <li>labore</li> <li>et</li> <li>dolore</li> <li>magna</li> <li>dolore</li> <li>magna</li> <li>aliqua</li> </ul>
