Dealing with Flexbox Last Row Orphans

Aaron K.
Aaron K.
Oct 3, 2016 · 1 min read

When using justify-content: space-between, and dealing with orphaned elements, they tend to create large gaps between the remaining orphans in the last row. Figuring it would be called out at stakeholder review, I searched the web for a solution but was unsuccessful in the attempt. Luckily, there were plenty of helpful articles to complete the puzzle.

I settled on naming it faux flexbox last row orphans to differentiate it from the filling the space approach and that it’s not included in the Flexbox spec.

Prerequisites

CodePen direct link.

Tip

When developing a responsive layout use both min and max-width media queries to trap :nth-child pseudo classes within a specific layout.

/* base layout */
...
/* 764px to 989px have a 3 column layout */
@media only screen and (min-width: 45.75em) and (max-width: 61.8125em) {
.item:nth-child(3n+1):nth-last-child(-n+3) ~ .item {
border: 3px solid gray;
margin-left:calc(31% * .110);
margin-right: auto;
}
}/* 990px and above have a 4 column layout */
@media only screen and (min-width: 61.875em) {
...

Update

Not sure faux flexbox last row orphans is worth the effort when the same can be done with display: inline-block.

CodePen direct link.

Still debating. If faux flexbox last row orphans makes it to production I’ll be back to update the article. Wish me luck!

Aaron K.

Written by

Aaron K.

Interactive Designer / Front-end Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade