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
 
samudras_andra 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
 
carolinesalib profile image
Caroline Salib

Thank you :D

Collapse
 
newscaptured1 profile image
newscaptured

Thanks Man it worked.

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
Collapse
 
chaikivskyi profile image
Petro

Nice trick!