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>