Thorben Bochenek Thorben Bochenek - 3 months ago 127
CSS Question

Flex-box: Align last row to grid

I have a simple flex-box layout with a container like:

.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}


Now I want the items in the last row to be aligned with the other.
justify-content: space-between;
should be used because the width and height of the grid can be adjusted.

Currently it looks like

The item in the bottom right should be in the middle

Here, I want the item in the bottom right to be in the "middle column". What is the simplest way to accomplish that? Here is a small jsfiddle that shows this behaviour.

Answer

One technique would be inserting a number of extra elements (as many as the max number of elements you ever expect to have in a row) that are given zero height. Space is still divided, but superfluous rows collapse to nothing:

http://codepen.io/dalgard/pen/Dbnus

In the future, this may become achievable through using multiple ::after(n).