Flexbox – Align Last Item in Grid To The Left

Share Your Thoughts

Flexbox is great for building 2D grids quickly and easily. It has pretty much replaced the use of the Float property when laying out content. But, one of the issues you might find is how efficiently it spaces your items within the grid…

For example, let’s say we have a grid of profile cards. We set the flexbox property of display: flex; on their container and use justify-content: space-between; to spread them evenly on the horizontal axis. This is all good until we have a grid with an odd number of items per row, when the last row displays an even number of items. We get this:

flexbox grid - space between with gap in last row

The last two items justify themselves to the edges of our container, leaving a gap in the centre. It doesn’t look good so we want to fix this and align the row to the left, closing the gap.

Fixing this is simple and to do it, we use a pseudo element. Going back to our container, (in this case, my container has a class of .speakers), we use the ::after element to create an empty item. We set the following:

.speakers::after {
content: '';
flex: auto;
}

This empty item has a flex property of auto, making it fill the available space and push the previous element to the left. So we get this:

flexbox grid item aligned left

Much better! If there is an even number, our empty container shifts to the next line, letting our grid do it’s thing properly.

CSS , ,


What do you think?

It's good to talk!

Your email address will not be published. Required fields are marked *

Please answer before submitting form * Time limit is exhausted. Please reload CAPTCHA.