css flexbox：除ul> li * 7列表的前两个元素外，元素之间的空间相等

Question

我正在使用CSS flex渲染一个简单的ul> li * 7列表。我希望元素之间的空间相等：我已将父项的justify-content设置为space-between。

但是，前两个元素是没有文本的图标，因此我希望它们保持在最左边。中间留有空格，默认情况下，第一个是最左边。如何将第二个也放在左侧，并在其他之间保持相等的距离？

代码：

<ul>
    <li class="left"></li>
    <li class="left"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<style rel="stylesheet">
    ul {
        display:flex;
        justify-content: space-between;
    }
    .left {
        something to make elements stick on left;
    }
</style>

Answer 1

不知道这是否对您有用，但是您可以尝试使用justify-content: flex-start;，然后再给所有<li>不位于左侧的margin: auto;。

ul {
    display:flex;
    justify-content: flex-start;
}
li:not(.left) {
    margin: auto;
}

<ul>
    <li class="left"></li>
    <li class="left"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>