Какой лучший способ задать gap для flex элементов?

Question

[WizardW]

Какой лучший способ сделать gap для flex элементов на подобии grid-gap в grids css ? Чтобы marginы ставились только внутри контейнера между элементами, снаружи никаких marginов не было
Нужно так

Так получается, если снаружи margin

Answer 1

[Mr Crabbz]

.item {
  margin: 30px;
}

.items-container {
  margin: -30px;
}

Answer 2

[Рома Зварич]

Для родителя можно задать еще justify-content: space-around;

Answer 3

[lagudal]

я бы для родителя поставил justify-content: space-between; + padding-inline-start: 0; padding-inline-end: 0;
для элемента - flex-basis: calc((100% / 3) - XXpx);
где ХХ - необходимый вам отступ.
Еще прописать медиа-запросы, если для меньших девайсов не по 3 а по 2 и 1 в ряд, соотв-но делить на 2 и 100%.

Answer 4

[ed]

.item {flex: 0 0 30%;}
.item-container {justify-content: space-between;}

Answer 5

[7GIT]

Gap — светлое будущее для отступов в Flexbox (как ...