How to align flexbox items like in the picture?

Question

css

Good afternoon! I'm learning to use Flexbox, so I decided to make such a layout, and I can't figure out how to align the elements on the left side, as in the first picture. In fact, it fills all the empty space with space, and not giving an even indent and aligning it to the left side.

Something like this structure:

<div>    //display: flex
    <ul>   //display: flex, justify-content: space-between; flex-wrap; wrap;
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

But justify-content aligns like in the 2nd picture, but I would like it to be like in the 1st, is this possible? Thank you!

Answer 1

here is one solution https://jsfiddle.net/DelphinPRO/hm3ewt1d/
there is a second one, I wrote a fiddle here on a toaster, but I did not find it. In a nutshell: we do justify-content, add two pseudo-elements for the parent with a height of 1px and a width equal to the width of the rest of the blocks. order set for them more than for blocks.

Answer 2

codepen.io/Geyan/pen/yVgGWy?editors=110 right??

Answer 3

Personally, in my opinion, this alignment looks prettier, and adapts much easier.

Answer 4

https://jsfiddle.net/3034a5bw/ everything else is trivial.