DEV Community

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

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

St3l on November 20, 2018

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 Fle...
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
 
mochdedijunaedi profile image
Muhammad Dedi •

Thank you for the update you got added insight

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
 
mohamadilhamramadhan profile image
Mohamad-Ilham-Ramadhan •

Thank you very much!

Collapse
 
shahriarkh profile image
Shahriar •

Finally, a simple accessible hack!

Collapse
 
carolinesalib profile image
Caroline Salib •

Thank you :D

Collapse
 
newscaptured1 profile image
newscaptured •

Thanks Man it worked.

Collapse
 
kolesnichenko_o profile image
Olya •

Thank you :)

Collapse
 
tristanlalor profile image
tristanlalor •

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

Collapse
Collapse
 
chaikivskyi profile image
Petro •

Nice trick!