CSS3 Flexbox расстояние между элементами

Будучи несколько новым для Flexbox (хотя и опытным в CSS), мне кажется, что в большинстве учебных пособий, которые я прочитал, просто "затушевывается", это расстояние между элементами flex.

Например, одним из наиболее цитируемых руководств является этот в CSS-трюках.

Это очень хорошо и было полезно, такие диаграммы меня отбросили:

Обратите внимание на пробелы между элементами flex. Хотя он не упоминается нигде, ни в примере кода, казалось бы, единственный способ получить пробелы с полями css.

Правильно, или я пропустил что-то важное здесь?

Потому что то, что мне нужно создать, очень похоже на демонстрацию "center" выше:

Однако, когда я сам это пробовал, я, конечно, понимаю:

Если я использую space-around, я получаю это вместо этого. Огромное пространство.

Поэтому кажется, что мне нужно добавить margin-right в первые 2 поля, чтобы получить 3 центрированных прямоугольника с небольшим промежутком между ними.

Это просто плохой вариант использования для Flexbox? Потому что я вижу небольшое преимущество, создавая свои 3 коробки с помощью Flexbox, используя простые поля и центрирование.

Я пропустил что-то очевидное здесь?

Ответ 1

Нет, вы ничего не пропустили. Flexbox является потрясающим для упорядочивания элементов и определения общего выравнивания этих элементов вдоль основной или поперечной осей, но не говорит непосредственно с отдельным интервалом между пунктами. Если вы посмотрите на этот Codepen, используемый в статье Flexbox, вы заметите, что они используют:

margin-top: 10px

чтобы определить интервал между элементами. Надеюсь, это поможет!

Ответ 2

.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>