Thorben Bochenek Thorben Bochenek - 1 year ago 539
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 Source

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:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download