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

#css #flexbox #html #webdev

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

Top comments (13)

Pedro Gritter • Jan 28 '22

If you don't know how many div elements you will have (example rendering an array) a simple solution is to set a max-width for you parent div so that you that at most N elements fit in a row.
Next use the elements as the example above but only with the same width defined as your elements, no height.
This way it will still left align your last row with the added effect that in case you have to add an extra empty row it will have no height!