如何使含不同数量<li>的<ul>列表各行元素间距保持一致

当前最后一行<li>元素间的间距与前几行不一致，希望所有行的<li>元素间距保持相同。不想使用text-align: center样式，因为这会破坏最后一行<li>元素与上方行<li>元素的对齐关系。

原HTML代码：

<body>
    <ul>
        <li><img src="http://placehold.it/120x90" alt="stack"></li>
        <li><img src="http://placehold.it/120x90" alt="stack"></li>
        <li><img src="http://placehold.it/120x90" alt="stack"></li>
        <li><img src="http://placehold.it/120x90" alt="stack"></li>
        <li><img src="http://placehold.it/120x90" alt="stack"></li>
        <li><img src="http://placehold.it/120x90" alt="stack"></li>
        <li><img src="http://placehold.it/120x90" alt="stack"></li>
        <li><img src="http://placehold.it/120x90" alt="stack"></li>
        <li><img src="http://placehold.it/120x90" alt="stack"></li>
        <li><img src="http://placehold.it/120x90" alt="stack"></li>
        <li><img src="http://placehold.it/120x90" alt="stack"></li>
    </ul>
</body>

原CSS代码：

ul {
    list-style-type: none;
    padding: 0;
    text-align: justify;
}
li {
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 10px;
    direction: ltr;
    width: 300px;
    display: inline-block;
    text-align: center;
}

推荐使用Flex布局替代text-align: justify，它能更简便地实现均匀间距，同时保持所有行的对齐一致性：

修改后的CSS代码：

ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* 伪元素占位，让最后一行保持与上方一致的间距规则 */
ul::after {
    content: "";
    width: 300px; /* 与li宽度一致 */
}

li {
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 10px;
    direction: ltr;
    width: 300px;
    text-align: center;
}

说明 #

1. justify-content: space-between会让每行<li>自动均匀分配间距，左右两端对齐，保证所有行间距一致。
2. 伪元素ul::after模拟一个与<li>等宽的占位元素，避免最后一行元素数量不足时出现挤在一起的情况，维持对齐逻辑。

如果偏好传统方法，也可以用伪元素修复text-align: justify的问题：

ul {
    list-style-type: none;
    padding: 0;
    text-align: justify;
    line-height: 0;
}

ul::after {
    content: "";
    display: inline-block;
    width: 100%;
}

li {
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 10px;
    direction: ltr;
    width: 300px;
    display: inline-block;
    text-align: center;
    line-height: normal;
}

通过宽度100%的伪元素触发text-align: justify对所有行生效，从而统一间距。

内容的提问来源于stack exchange，提问作者lapin