Spacing between flexbox items

Question

This is what I want:

The closest I\'ve got. Applying margin on flexbox items, then re

Answer 1

EDIT - I don't suggest using this approach, it's hackish. I'll leave it here for posterity.

What I did to approach this, since I wasn't sure how many elements I'd have within each flex space. For example, I am building a Drupal theme and have four regions that align side-by-side, but I want the full width to be taken up, even if there is content in only three of the regions.

• Gave each region a padding of 10px
• Set the background colour of each region to match the theme background colour - in my case white
• Created a div inside each region (to create the illusion of a margin between them.

HTML looks like this:

CSS looks like this:

.flexy {
    display: flex;
    flex-wrap: wrap;
}

.flexy .region {
    box-sizing: border-box;
    flex-grow: 1;
    flex-basis: 0;
    padding: 10px;
}

This leaves me with a layout like so (ignore the ugliness, the colours are only to demonstrate):

There are some other classes added such as 'halves', 'thirds', and 'quarters' to help out making things responsive on smaller and/or larger screens.