Вариант 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
Естественно, что способов для того, чтобы задать отступы между флексбокс-элементами или для их равномерного размещения внутри контейнера, гораздо больше, и есть гораздо более изощренные варианты. Но я привел наиболее часто используемые способы и самые простые для понимания.
Комментарии (19) к “Простой способ задать отступы между flexbox элементами”
Volodymyr
Спасибо
R3M4ND
Огромное спасибо, очень помогли
Denis Creative
Пожалуйста! Приятно, когда информация с моего сайта помогает кому-то еще кроме меня))
Artem
Спасибо! за то, что вы это выложили )
Varfolomei
Что за бред? С отрицательными margin будет горизонтальный скрол, потому что в таком случае container увеличиться на 10px
Denis Creative
Естественно, что блок
.box
должен находиться внутри контейнера с нужным отступом, который будет перекрывать отрицательный margin, или в противном случае нужно задавать родительскому контейнеруoverflow: hidden
.Это, как бы, и так понятно.
Или, как по вашему, работает отрицательный отступ для блока
.row
в Bootstrap?Ксения
Спасибо большое! спасли кучу моего времени)
Denis Creative
Успехов!
Егор
спасибо бро! прям сохранил мне день
Denis Creative
Продуктивного дня!)
EscaG
Вот формула для того чтобы задать расстояние между блоками это сила, теперь всегда будет четкий размер и не нужно сидеть и играть с % или дополнительными внутренними блоками. Спасибо!
Inno
Каеф
Владимир
Друзья, как сделать отступ между первым флекс-элементом и остальной флекс-
группой в next.js?
Denis Creative
Если бы показали пример в codepen – было бы понятнее
Вячеслав
нашли как сделать?
Виктор
Спасибо огромное за статью! Очень помогли.
Denis Creative
Я рад, успехов!)
Михаил
Большое спасибо, Денис! Очень полезная для меня статья!
Denis Creative
Спасибо за ответ! Успехов!=)