css flexbox：元素之間的空間除了前兩個ul> li * 7列表

Question

我正在使用css flex來呈現簡單的ul> li * 7列表。 我希望元素之間的空間相等：我已經將父對齊內容設置爲空格之間。

但是，前兩個元素是沒有文字的圖標，所以我希望它們留在最左側。 在空格之間，第一個默認是在最左側，沒關係。 我怎麼能把第二個也放在左邊，保持其他人之間的平等空間？

代碼：如果

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