Как задать минимальный отступ между элементами flexbox?

Немного опоздал на вечеринку, но столкнулся с той же проблемой. Мой способ решения, возможно, не подойдет всем, но вот он для тех, кому это может пригодиться.

Основная идея заключается в том, что у вас есть минимальное расстояние x. Вы устанавливаете левый и правый отступы каждого элемента по x/2, так что расстояние между элементами будет равно x (отступ + отступ). Затем вы оборачиваете все элементы в контейнер с левым и правым отступами -x/2. Это скроет отступ у элементов на краях каждой строки.

Вот рабочий пример:

.box {
  border: 1px solid black;
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -1em;
}

.item {
  display: flex;
  border: 1px solid grey;
  padding: 1em;
  width: 20%;
  margin: 0 1em;
}

<div class="box">
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>

Свойство overflow-x: hidden; у .box предотвращает появление горизонтальной полосы прокрутки, которая появляется в некоторых браузерах из-за переполнения отступом.

Если вы хотите, чтобы расстояние всегда оставалось одинаковым, и чтобы строки с одним элементом занимали всю ширину строки, вы можете добавить flex-grow: 1 к .item.

Вы можете добавить еще один div с стилем flex, чтобы удерживать необходимый зазор между внутренними div. Для минимальной ширины этого зазора используйте следующее свойство (как упомянуто на W3Schools.com):

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

При этом flex-shrink обозначает:

flex-shrink: Число, указывающее, насколько элемент будет сжиматься относительно остальных гибких элементов.

Таким образом, например, если вы зададите этот CSS-код для gap div:

flex: 1 0 10px;

это будет означать, что gap div будет иметь ширину 10px и будет расти относительно остальных гибких элементов, но не будет сжиматься. Таким образом, минимальная ширина зазора составит 10px даже при минимальной ширине экрана.

Прошло пару дней с момента, когда был задан этот вопрос, но я решил добавить свое решение на случай, если кто-то столкнется с такой же проблемой.

Я предлагаю использовать calc, width и медиа-запросы для решения этой задачи. Да, это требует немного работы, но, на мой взгляд, этот подход визуально выглядит аккуратно.

.main{
  display:         flex;
  justify-content: space-between;
  flex-wrap:       wrap;
}
.main > div{
  width: 100%;
  height: 125px;
  border: 1px solid red;
}

@media (min-width: 576px) {
  .main > div{
    width: calc(100% / 2 - 5px);
    margin-bottom: 5px;
  }
}
@media (min-width: 992px) {
  .main > div{
    width: calc(100% / 3 - 5px);
  }
}
@media (min-width: 1140px) {
  .main > div{
    width: calc(100% / 6 - 5px);
    margin-bottom: 0;
  }
}

<div class="main">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Для нужных брейкпоинтов я вычисляю ширину, которую хочу задать для div, и вычитаю пространство, которое хочу оставить между ними.

Надеюсь, это поможет кому-то, и я объяснил все достаточно понятно.

С уважением.

Вы также можете использовать функцию clamp вместе с свойством gap, чтобы эффективно задать минимальное и максимальное значение отступов. В приведенном ниже примере отступы останавливаются на 4px и увеличиваются до 64px. Более удобно протестировать изменение размеров на сайте https://jsfiddle.net/90wxsp5a/.

ul {
    display: inline-flex;
    padding: 0;
    list-style: none;
    gap: clamp(4px, 1vw, 64px);
}

li {
    border: 1px solid gray;
    padding: 5px;
}

<!-- Уменьшите окно/панель, чтобы увидеть, как это работает -->

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Таким образом, с помощью clamp вы можете динамически управлять промежутками между элементами списка в зависимости от размера окна.

Вопрос: Как задать фиксированное пространство между элементами с использованием flexbox?

Ответ: Задание flex-basis в процентах также решит эту задачу. В этом случае минимальное пространство между элементами также будет в процентах. Например, если у вас есть 3 элемента и вы зададите flex: 0 0 30%, то будет оставаться фиксированное пространство в 10%, распределенное между элементами. Если у вас 6 элементов, можно использовать flex: 0 0 15% и так далее.