A little trick to left align last row's items with Flexbox

For my first article here I wanted to share with you a little trick I have learned few months ago.

For those who, like me, loves working with Flexbox, you have probably encountered in the past the problem of items in the last row who don't behave quite well. Meaning by that, they don't have a left align :

Very unsatisfying isn't it ?

Well, there is a very simple way to have a perfect left alignment with a simple html property: aria-hidden

This property will indicate that the element as well as its children will not be visible nor perceivable by the user or the reader. For more informations you can go on the W3 website .

So here some simple html to create those beautiful blue squares up there :

As you can see I have six empty divs to create the squares and below three <i> tags with the aria-hidden property sets to "true".

These <i> tags correspond to the square elements I might need to complete the last row. To be clearer, my rows are made up of four elements. If you don't know how many elements you will have in your rows, you can however know that you will have at least one element in the last row. So, you'll need as many <i> tags as there is places in your row, minus one.

Now, we need some css :

Here, I gave to the container of my rows different Flexbox properties including justify-content: center. But this trick works with others values like space-between or space-around.

Look at my items. I gave them a width and an height of 250px as well as margins of 20px.

The important thing here is that you have to give to your <i> tags the same width, height and margins as your items.

And finally, TADAAA!!! A perfect left align ;)