Ответ
Используй gap для создания равных отступов между элементами внутри flex-контейнера. Это современный и чистый способ, который не требует марджинов или паддингов на самих элементах.
.container {
display: flex;
gap: 20px; /* отступ между элементами */
}Плюсы:
- Работает по обеим осям (для
flex-direction: row— горизонталь, дляcolumn— вертикаль) - Не требует сложных селекторов вроде
:not(:last-child) - Поддержка в современных браузерах (Can I Use: ~95%)
Альтернатива для старых проектов:
.card:not(:last-child) {
margin-right: 20px; /* для row */
margin-bottom: 20px; /* для column */
}Ответ 18+ 🔞
Вот же ж, народ, опять про эти ваши отступы между блоками! Ну слушайте, блядь, историю.
Раньше-то, в старые добрые времена, когда интернет был на костылях, мы выкручивались как могли. Хочешь между карточками расстояние сделать? Так, блядь, берёшь последнюю, кроме неё, и всем под хвост марджин пихаешь!
.card:not(:last-child) {
margin-right: 20px; /* для row */
margin-bottom: 20px; /* для column */
}И сидишь, блядь, думаешь: а если направление колонкой? А если перенести строку? О, ёпта, мозг выносит! Пиздец, а не верстка. Чистая магия, а не код. И каждый раз одно и то же, как заезженная пластинка.
А теперь, блядь, смотрите сюда, какая красота пришла! Прямо как из сказки, в рот меня чих-пых!
.container {
display: flex;
gap: 20px; /* отступ между элементами, и всё, блядь! */
}Вот и весь разговор! Один хуёк — gap — и порядок. Он сам, хитрая жопа, понимает, куда отступы ставить: если в ряд — по бокам, если в колонку — сверху-снизу. Красота, ёперный театр!
Чем хорош, этот ваш gap?
- Работает и туда, и сюда, по всем осям. Не надо голову ломать.
- Никаких этих
:not(:last-child), которые с ума сводят. Чистота, блядь! - Во всех современных браузерах уже давно работает, поддержка — овердохуищная, под 95%.
Так что, если проект не для древних IE, который сам себя уже похоронил, — забудьте про старые костыли. Берите gap и живите спокойно. А старый способ — это так, для истории, чтобы помнили, через какое говно мы продирались.