Giving wrapped flexbox items vertical spacing

by

I had a similar issue and I used the following hack to solve the issue.

    /* add a negative top-margin to the flex container */
.flexContainer {
        /* ... your existing flex container styles here */
    margin: -10px 0 0 0;
} 
    /* add a corresponding positive top margin to all flex items (all direct children of the flex container) */
.flexContainer > * {
    margin-top: 10px;
}

For the top row of flex items the negative and positive margins cancel out, for the subsequent rows it adds the margin between the rows (in this case 10px between rows).

It’s less than elegant but it gets the job done.

Leave a Comment