CSS3 Интервал между Flexbox между элементами

Question

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

Например, одним из наиболее цитируемых руководств является this one at CSS Tricks.

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

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

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

Потому что мне нужно, чтобы создать это, очень похоже на «центр» демо выше:

Однако, когда я пытаюсь это сам, я, конечно, получить это:

если Я использую пространство вокруг, я получаю это вместо этого. Огромное пространство.

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

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

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

Answer 1

Нет, вы ничего не пропустили. Flexbox отлично подходит для упорядочивания элементов и определения общего выравнивания этих элементов вдоль основной или поперечной осей, но не говорит непосредственно о каждом отдельном расстоянии между элементами. If you take a look at this Codepen used in the Flexbox article, вы заметите, что они используют:

margin-top: 10px 

для определения расстояния между элементами. Надеюсь это поможет!

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