Spacing between flexbox items

Question

This is what I want:

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

Answer 1

Another solid point for using Flex is that you can specify the strategy to use for the remaining space:

.container {
    justify-content: space-between;
}

Answer 2

The CSS spec has recently been updated to apply gap properties to flexbox elements in addition to CSS grid elements. This feature is supported by Firefox and Chrome at time of writing. The bug tracker page for adding it to webkit/Safari is here. With the gap property, you can get what you want with just gap: 10px (or whatever size you want) without needing to deal with margins, :first-child, :last-child, etc.

Answer 3

here is another way of getting the same thing.

.vertical > div{ margin-bottom: 10px; }
.vertical > div:last-child{ margin-bottom: 0; }
.box + .box{ margin-left: 10px; }