Как установить минимальное расстояние между элементами flexbox?

Учитывая этот CSS:

div.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border: 1px solid blue;
}
div.container div {
  width: 200px;
  border: 1px solid gray;
  display: inline-block;
  text-align: center;
}

В этом макете первый элемент в каждой строке выровнен по левому краю, а последний элемент - по необходимости.

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

Есть ли способ установить минимальный интервал, чтобы внутренние элементы div всегда имели зазор между ними.

отступы и поля, вероятно, не будут работать, так как выравнивание

<-- 1st left in row и last right in row --> не будут удерживаться.

Ответы

Ответ 1

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

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

который имеет гибкую усадку:

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

поэтому, например, вы устанавливаете этот код css для div div:

flex: 1 0 10px;

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

Ответ 2

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

Основная идея заключается в том, что у вас минимальный пробел x. Вы устанавливаете левое и правое поля каждого элемента на x/2, чтобы расстояние между элементами составляло x (margin + margin). Затем вы переносите все элементы в контейнер с левым и правым краем -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>

Ответ 3

Установка flex-base с процентом также поможет. Тогда минимальный интервал будет также в процентах. Например, с 3 элементами, flex: 0 0 30% позволит фиксированное пространство 10%, перераспределенное между элементами. с 6 элементами, flex: 0 0 15% и так далее.

Ответ 4

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

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

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

Ответ 5

попробуйте ниже css. Надеюсь, это поможет.

div.container {
  position:absolute;
  border: 1px solid blue;
  div {
    width: 200px;
    margin:0px;
    border: 1px solid gray;
    display: inline-block;
    text-align: center;
  }
}