Простой способ задать отступы между flexbox элементами

08.02.2019

Вариант 1 – отрицательный отступ для родительского блока

Самый простой способ установить минимальное расстояние между элементами flexbox – используем margin: 0 5px для дочерних элементов .item и отрицательный отступ margin: 0 -5px для родительского контейнера .box.

CSS

.box {
  display: flex;
  margin: 0 -5px;
}
.item {
  flex: 1 1 auto;
  margin: 0 5px;
}

HTML

<div class='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

See the Pen NWGKWGJ by Denis (@deniscreative) on CodePen.dark

Вариант 2 – без отрицательного отступа с отступами по бокам

Не используем отрицательные отступы и не используем :first-child/:last-child. Задаем внутреннее поле для контейнера padding:5px и задаем отступы для дочерних элементов margin:5px. Таким образом мы получаем равномерный отступ 10px между дочерними элементами и от дочерних элементов до контейнера.

CSS

.box {
  display: flex;
  padding: 0 5px;
}
.item {
  flex: 1 1 auto;
  margin: 0 5px;
}

HTML

<div class='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

See the Pen Uniform distribution of blocks with flex 2 by Denis (@deniscreative) on CodePen.dark

Вариант 3 – фиксированная ширина с помощью calc()

Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc(). Данный способ не совсем хорош для размещения флексбокс-элементов в несколько рядов, потому что элементы растягиваются по краям контейнера justify-content: space-between.

CSS

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  width: calc(1/3*100% - (1 - 1/3)*10px);
  margin: 0 0 10px;
}

где 1/3 – это 3 колонки в ряд, и 10px – это ширина между колонками.

HTML

<div class='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

See the Pen Uniform distribution of blocks with flex 3 by Denis (@deniscreative) on CodePen.dark

Вариант 4 – фиксированная ширина с помощью calc() с отступами по бокам

Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc(). Но главное отличие от предыдущего варианта, что для дочерних элементов .item заданы отступы по бокам, а для родительского контейнера .box заданы отрицательные отступы как в первом примере. И таким образом, мы можем задать justify-content: flex-start; чтобы flexbox-элементы располагались равномерно слева направо.

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

CSS

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 -5px;
}
.item {
  width: calc(1/3*100% - 10px);
  margin: 5px;
}

где 1/3 – это 3 колонки в ряд, и 10px – это ширина между колонками.

HTML

<div class='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

See the Pen Uniform distribution of blocks with flex 4 by Denis (@deniscreative) on CodePen.dark

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

Полезная инфа:

Комментарии (8) к “Простой способ задать отступы между flexbox элементами”

  • Volodymyr

    Спасибо

    Ответить
  • R3M4ND

    Огромное спасибо, очень помогли

    Ответить
  • Artem

    Спасибо! за то, что вы это выложили )

    Ответить
  • Varfolomei

    Что за бред? С отрицательными margin будет горизонтальный скрол, потому что в таком случае container увеличиться на 10px

    Ответить
    • Denis Creative

      Естественно, что блок .box должен находиться внутри контейнера с нужным отступом, который будет перекрывать отрицательный margin, или в противном случае нужно задавать родительскому контейнеру overflow: hidden.

      Это, как бы, и так понятно.

      Или, как по вашему, работает отрицательный отступ для блока .row в Bootstrap?

      Ответить
  • Ксения

    Спасибо большое! спасли кучу моего времени)

    Ответить

Оставить комментарий