Flex-box: Align last row to grid

Question

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 1

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).

Flex-box: Align last row to grid

Sign up