Простой способ задать отступы между flexbox элементами
Вариант 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
Естественно, что способов для того, чтобы задать отступы между флексбокс-элементами или для их равномерного размещения внутри контейнера, гораздо больше, и есть гораздо более изощренные варианты. Но я привел наиболее часто используемые способы и самые простые для понимания.
Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для…
Очень популярная функция на различных одностраничниках — плавный скролл к нужному элементу на этой же…
Использование @keyframes с препроцессором SASS. Базовый пример использования @keyframes в SASS: Создаем миксин, чтобы добавить…
CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS…
19 комментариев
Ответить
Спасибо
Огромное спасибо, очень помогли
Пожалуйста! Приятно, когда информация с моего сайта помогает кому-то еще кроме меня))
Спасибо! за то, что вы это выложили )
Что за бред? С отрицательными margin будет горизонтальный скрол, потому что в таком случае container увеличиться на 10px
Естественно, что блок
.box
должен находиться внутри контейнера с нужным отступом, который будет перекрывать отрицательный margin, или в противном случае нужно задавать родительскому контейнеруoverflow: hidden
.Это, как бы, и так понятно.
Или, как по вашему, работает отрицательный отступ для блока
.row
в Bootstrap?Спасибо большое! спасли кучу моего времени)
Успехов!
спасибо бро! прям сохранил мне день
Продуктивного дня!)
Вот формула для того чтобы задать расстояние между блоками это сила, теперь всегда будет четкий размер и не нужно сидеть и играть с % или дополнительными внутренними блоками. Спасибо!
Каеф
Друзья, как сделать отступ между первым флекс-элементом и остальной флекс-
группой в next.js?
Если бы показали пример в codepen — было бы понятнее
нашли как сделать?
Спасибо огромное за статью! Очень помогли.
Я рад, успехов!)
Большое спасибо, Денис! Очень полезная для меня статья!
Спасибо за ответ! Успехов!=)