Будучи несколько новым для Flexbox (хотя и опытным в CSS), мне кажется, что в большинстве учебных пособий, которые я прочитал, просто "затушевывается", это расстояние между элементами flex.
Например, одним из наиболее цитируемых руководств является этот в CSS-трюках.
Это очень хорошо и было полезно, такие диаграммы меня отбросили:
Обратите внимание на пробелы между элементами flex. Хотя он не упоминается нигде, ни в примере кода, казалось бы, единственный способ получить пробелы с полями css.
Правильно, или я пропустил что-то важное здесь?
Потому что то, что мне нужно создать, очень похоже на демонстрацию "center" выше:
Однако, когда я сам это пробовал, я, конечно, понимаю:
Если я использую space-around, я получаю это вместо этого. Огромное пространство.
Поэтому кажется, что мне нужно добавить margin-right в первые 2 поля, чтобы получить 3 центрированных прямоугольника с небольшим промежутком между ними.
Это просто плохой вариант использования для Flexbox? Потому что я вижу небольшое преимущество, создавая свои 3 коробки с помощью Flexbox, используя простые поля и центрирование.
Я пропустил что-то очевидное здесь?
Нет, вы ничего не пропустили. Flexbox является потрясающим для упорядочивания элементов и определения общего выравнивания этих элементов вдоль основной или поперечной осей, но не говорит непосредственно с отдельным интервалом между пунктами. Если вы посмотрите на этот Codepen, используемый в статье Flexbox, вы заметите, что они используют:
margin-top: 10px
чтобы определить интервал между элементами. Надеюсь, это поможет!
.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>