I'm currently using margin but not sure if this is the recommended way in the spec.
.flex-container {
display: inline-flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin-right: 10px;
}
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
Jason Knight
The less code you use, the less there is to break
Margin does indeed seem to be the correct one to use, which CAN be problematic if you don't plan for it or workaround one-side with nth-child or something similar.
It's to that end I'm much more enthusiastic about the poorly named CSS Grid Layout module than I am anything Flex offers. That it's gone from -ms only support in bleeding edge M$ browsers only to fully properly implemented in everything else in only a year is a godsend, even if planning for zero support in IE10/earlier is a bit tricky.
Flex always struck me as too poorly documented and a bit too complex for its own good... and having to GUESS as to what to use to put gaps between things is a perfect example of that.
That said, you PROBABLY shouldn't be declaring fixed widths and heights in pixels, but that would depend on your CONTENT. If it's text remember the WCAG says to use EM, so use 'em!