DEV Community

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

Posted on • Updated on

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

Top comments (12)

pedrogritter profile image
Pedro Gritter

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!

stel profile image

Thank you for this update๐Ÿ‘Œ๐Ÿ˜Š

laski profile image

Hi, Pedro Gritter do you have working example for this?

thedevmoe profile image
Moses Nwigberi

Thank you. This actually worked for me. I didnโ€™t even need to set a defined height for the i tag

samudras_andra profile image
Muhammad Dedi

Thank you for the update you got added insight

carolinesalib profile image
Caroline Salib

Thank you :D

mohamadilhamramadhan profile image

Thank you very much!

tristanlalor profile image

And they said it couldn't be done! Very clever, thank you.

shahriarkh profile image

Finally, a simple accessible hack!

kolesnichenko_o profile image

Thank you :)

newscaptured1 profile image

Thanks Man it worked.