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

css, flexbox, html

Solution

Not sure if this will work your you, but you could try using `justify-content: flex-start;` and then giving all the `<li>`s that are not to the left `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>

Problem

I am using css flex to render a simple ul>li*7 list. I want the space between elements to be equal : I've set the parent justify-content to space-between. However, the two first elements are icons without text, so I'd like them to stay on the far left. With space-between, the first one is by default on the far left, that's ok. How can I put the second one on the left too, keeping an equal space between the others ? Code : ``` <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> ```

Original source