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

Question

我正在使用 css flex 呈现一个简单的 ul>li*7 列表。我希望元素之间的 space 相等：我已将父级 justify-content 设置为 space-between.

但是，前两个元素是没有文本的图标，所以我希望它们留在最左边。用space-between，第一个默认在最左边，没关系。我怎样才能把第二个也放在左边，让其他人之间的 space 相等？

代码：

<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>s 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>

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

css flexbox : equal space between elements except the first two of ul>li*7 list

html

css

flexbox