CSS3 Flexbox spacing between items

.rope {
  width: 393px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background-color: aquamarine;
}
.box {
  height: 100px;
  width: 100px;
  margin: 15px;
  background: red;
}

<div class='container'>
  <div class='rope'>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

The CSS spec has recently been updated to apply gap properties to flexbox elements in addition to CSS grid elements. This feature is supported on the latest versions of all major browsers. With gap properties, you can get what you want with something like column-gap: 10px (or whatever size you want).

Nope - you're not missing anything. Flexbox is terrific for ordering elements and defining the general alignment of those elements along either the main or cross axes, but doesn't speak directly to individual item spacing. If you take a look at this Codepen used in the Flexbox article, you'll notice they use:

margin-top: 10px

to define element spacing. Hope this helps!