DEV Community

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

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 :

first_picture

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 :
second_picture

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 :
third_picture

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

Top comments (12)

Collapse
 
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!

Collapse
 
stel profile image
St3l

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

Collapse
 
laski profile image
Laski

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

Collapse
 
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

Collapse
 
samudras_andra profile image
Muhammad Dedi

Thank you for the update you got added insight

Collapse
 
carolinesalib profile image
Caroline Salib

Thank you :D

Collapse
 
mohamadilhamramadhan profile image
Mohamad-Ilham-Ramadhan

Thank you very much!

Collapse
 
tristanlalor profile image
tristanlalor

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

Collapse
 
shahriarkh profile image
Shahriar

Finally, a simple accessible hack!

Collapse
 
kolesnichenko_o profile image
Olya

Thank you :)

Collapse
 
newscaptured1 profile image
newscaptured

Thanks Man it worked.

Collapse