Как задать расстояние между flex элементами

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

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

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

CSS

.box < display: flex; margin: 0 -5px; >.item

HTML

 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

HTML

 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

 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

 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…

Флексы для начинающих

Flexbox — инструмент построения крупных сеток и микросеток.

Чтобы превратить блок во флекс-контейнер, ему задают свойство display: flex . Непосредственные потомки такого контейнера — флекс-элементы — становятся гибкими. Они легко сжимаются или растягиваются, меняют порядок, поддаются выравниванию по главной и поперечной осям.

Благодаря таким свойствам мы можем создавать на флексах меню сайта, раздел с карточками товаров, пагинацию или любые другие блоки, в которых нужно предусмотреть переполнение контентом. При правильном использовании Flexbox вы получите отзывчивый сайт, который легко адаптируется к различным размерам экрана и устройствам.

Главная и поперечная оси

Элементы флекс-контейнера выравниваются вдоль двух осей: главной и поперечной.

Главная ось указывает направление потока флекс-элементов. По умолчанию он течёт по горизонтали слева направо, от начала к концу оси:

Направлением главной оси можно управлять, меняя значения свойства flex-direction :

• flex-direction: row — ось направлена слева направо, элементы располагаются в ряд. Это значение по умолчанию.
• flex-direction: row-reverse — элементы идут в обратном направлении — справа налево.
• flex-direction: column — элементы располагаются в столбец сверху вниз.
• flex-direction: column-reverse — элементы идут снизу вверх.

Чаще всего используется значение по умолчанию — row , чуть реже — column . x-reverse применяют редко.

Поперечная ось всегда находится под углом 90 градусов к главной. Если главная ось горизонтальна, поперечная идёт сверху вниз, а если главная вертикальна, то поперечная направлена слева направо.

justify-content

Флекс-элементами можно управлять, меняя их положение относительно каждой оси. CSS-свойство justify-content распределяет элементы по главной оси. Оно принимает следующие значения:

• flex-start — элементы стоят в начале оси.
• flex-end — элементы стоят в конце оси.
• center — элементы по центру оси.
• space-between — элементы равномерно распределены вдоль главной оси, при этом первый элемент располагается в начале, а последний — в конце. Между крайними элементами и флекс-контейнером отступа нет.
• space-around — элементы равномерно распределены вдоль оси. Расстояние между крайними элементами и флекс-контейнером равно половине отступа между соседними флекс-элементами.
• space-evenly — элементы равномерно размещены вдоль оси. Отступы между соседними элементами и краями флекс-контейнера равны.

align-items

За выравнивание элементов по поперечной оси отвечает свойство align-items . По умолчанию у него значение stretch , то есть элементы растягиваются вдоль всей оси.

• flex-start — элементы идут в начале оси;
• flex-end — элементы идут в конце оси;
• center — элементы в центре оси;
• baseline — элементы размещены по базовой линии.

Базовая линия — невидимая линия, которая проходит по нижней части букв.

Порой в макете отдельные элементы располагаются выше или ниже, правее или левее. На такие случаи во флексах есть свойство align-self . Оно выравнивает отдельный элемент по поперечной оси.

Значения align-self такие же, как у align-items.

align-content

Вдоль поперечной оси можно выравнивать не только элементы, но и ряды флекс-элементов — это делается с помощью свойства align-content .

align-content немного похож на свойства justify-content и align-items . От первого он взял значения:

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

От align-items достались свойства: stretch и baseline .

С align-content мы можем расположить ряды элементов более гибко — например, задав одинаковые расстояния между ними или растянув на всю возможную высоту.

Отличие align-content от align-items

align-items выравнивает элементы внутри флекс-контейнера, а align-content — ряды.

По умолчанию у align-content значение stretch — то есть ряды флекс-элементов растягиваются, и свободное пространство делится между ними пополам. В таких случаях отображение зависит от значения align-items . Если это тоже stretch , то элементы в строке растянутся на всю высоту. Если нет — элементы сожмутся до размеров содержимого и выровняются согласно значению align-items .

Когда align-content задано другое значение (не stretch ), оно перекрывает значения align-items и align-self . Например, здесь ряды элементов окажутся в конце поперечной оси:

flex-wrap

В коде выше есть свойство flex-wrap — оно отвечает за перенос строк во флекс-контейнере. По умолчанию у свойства стоит значение no-wrap , то есть перенос запрещён. При добавлении новых элементов все элементы станут сжиматься до минимально возможной ширины — даже если явно указано значение width . Когда элементы перестанут помещаться в контейнере, то выйдут за его пределы.

Чтобы элементы при заполнении ряда переносились на новый, нужно указать flex-wrap: wrap . Наглядный пример — гифка в начале статьи.

Ещё без переноса рядов не работает свойство align-content . Например, в таком случае элементы выровняются по началу поперечной оси.

Игры и курсы для практики

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

Где практиковаться и что изучить:

• Flexbox froggy — игра на русском языке, где вы с помощью флексов размещаете лягушат на кувшинках.
• Flexbox Defense — англоязычная игра в стиле Tower Defense. Вы на флексах располагаете башни, чтобы защититься от врагов.
• Курс «HTML и CSS. Профессиональная вёрстка сайтов». Научитесь верстать сайты и писать для них стили. Изучите не только флексы, но и гриды — ещё один современный механизм построения сеток.

Материалы по теме

• Примеры использования флексов
• Когда использовать флексы, а когда гриды
• Как сверстать макет

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Отступы между блоками на flex

Есть следующий макет: Сверстано так:

.block3_header < display: flex; align-items: center; justify-content: center; margin-top: 87px; >.block3_header span < font-family: 'Gilroy-Bold'; font-size: 34px; line-height: 42px; text-align: center; color: #070707; >.block3_subText < display: flex; align-items: center; justify-content: center; margin-top: 55px; >.block3_subText span < font-family: 'Gilroy-Medium'; font-size: 18px; line-height: 22px; text-align: center; color: #070707; >.container_skills < margin-top: 80px; >.block3_skills < display: flex; align-content: flex-end; justify-content: space-evenly; align-items: flex-start; >.block3_skill < display: flex; flex-direction: column; align-items: center; >.block3_stars < display: flex; >.block3_stars img < margin-right: 9px; >.block3_stars:last-child < margin-right: 0; >.block3_subTitle < display: flex; margin-top: 24px; margin-bottom: 42px; >.block3_subTitle span

 
 
 
 
  
 
 Adobe
Photoshop 
 
          
 
 
 
  
 
 Adobe
Illustrator 
 
          
 
 
 
  
 
 Adobe
After Effects 
 
          
 
 
 
  
 
 Figma 
          
 
 
 

Проблема заключается в то, что по макету карточки с программами находятся ближе друг к другу, чем по факту у меня получились. Есть вариант во флексах как-то уменьшить отступ между блоками?

Gap — светлое будущее для отступов в Flexbox (как в Grid)

Одна из моих любимых частей спецификации CSS Grid — это grid-gap . Они позволяют легко создавать отступы между элементами внутри сетки.

Margins и приёмы, к которым мы прибегаем, чтобы реализовать их в разных ситуациях, долгое время были одним из главных моментов, раздражающих меня в CSS.

W3C порекомендовала отказаться от свойства grid-gap в пользу простого gap и его использования в Flexbox и Multi-Column.

В этом руководстве мы посмотрим, как добавляли margins в Flexbox раньше и как это делает свойство gap , позволяя нам получить внутренние отступы без дополнительных ухищрений.

Margins в обычной Flexbox-сетке

В этом примере мы возьмем группу блоков, используем Flexbox для создания стиля сетки, а затем отделим блоки друг от друга с помощью margins.

Начнём с базового HTML. Имеем flex-container и набор flex-item.

Благодаря поведению Flexbox, содержимое расположится друг рядом с другом. Отталкиваясь от значения ширины контейнера, определим размер дочерних элементов и затем позволим им переносится с помощью свойства flex-wrap .

.flex-container < display: flex; flex-wrap: wrap; >.flex-item < width: calc(100% / 3); >

Это даёт нам блоки идеального размера, равные 1/3 ширины контейнера. Давайте зададим margins, чтобы добавить пространство по вертикали и горизонтали между каждым элементом.

.flex-item < width: calc(100% / 3); margin-right: 1rem; margin-bottom: 1rem; >

Ой! Наши элементы, являющиеся 1/3 контейнера, больше не помещаются в ширину родительского элемента. Хотя margins между рядами получились вполне корректными и не вызвали проблем.

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

Теперь у нас остались два margins, равных 1rem и мы должны вычесть эти 2rem равномерно из ширины всех трёх элементов.

flex-item < // width: calc(100% / 3); width: calc((100% / 3) - (2rem / 3)); // one-third - two margins divided equally among 3 items margin-right: 1rem; margin-bottom: 1rem; >.flex-item:nth-child(3n)

Выглядит слишком сложно? Для меня да. Существуют более простые способы сделать это, но они также не дают вам точных 1rem промежутков между колонками. Этот сложный код также существенно усложняет адаптивный дизайн.

Когда свойство gap станет доступным для использования в Flexbox во всех браузерах, код станет намного чище. Мы можем также перейти от установки ширины для дочерних элементов, к использованию свойств flex-grow , flex-shrink и flex-basis .

Установка отступов с помощью Gap

Используя свойство gap, мы избавляемся от необходимости проделывать большинство ухищрений с шириной элементов. Это также позволяет нам вернуться к использованию значений flex-grow/flex-shrink.

В следующем примере мы всё ещё используем свойства display: flex и flex-wrap: wrap для нашего контейнера, но теперь также добавляем свойство gap . Это сокращенное свойство, которое объединяет в себе row-gap и column-gap . Ознакомьтесь с документацией MDN, чтобы узнать обо всех методах.

Теперь, вместо установки ширины для каждого flex-элемента, мы устанавливаем значения flex-grow, flex-shrink и flex-basis. Свойство flex-basis будет определять, какое количество колонок браузеры будут устанавливать в контейнере. Мы всё еще будем использовать функцию calc() для этого, но код в конечном счете станет чище

.flex-container < display: flex; flex-wrap: wrap; gap: 1rem; >.flex-item < flex: 1 1 calc((100% / 3) - 2rem); >

Внимательный читатель также заметит, что теперь это позволяет последним элементам увеличиваться в размере, чтобы заполнить пространство ряда, в котором недостаёт элементов. Это то, что для нас не могут сделать CSS Grid и Flexbox, основанный на ширине элементов.

Бонус: Gap также облегчает достижение отзывчивости

В нашем изначальном примере, если мы хотели изменять количество колонок контейнера в определенных контрольных точках, приходилось пересчитывать ширину И изменять nth-child селекторы, чтобы избавиться от margins.

В примере с использованием gap , всё что нам нужно делать, это корректировать свойство flex-basis, и всё готово.

.flex-item < flex: 1 1 100%; // 1 across at mobile >@media (min-width: 640px) < .flex-item < flex-basis: calc((100% / 2) - 1rem); // 2 across at tabletish >> @media (min-width: 1024px) < .flex-item < flex-basis: calc((100% / 3) - 2rem); // 3 across at desktop >> 

Не буду врать, я всё еще предпочитаю CSS Grid для такого шаблона проектирования, но надеюсь, вы увидите несколько примеров использования для этой невероятной новой функции.

Заглядывая в будущее

Сейчас свойство gap поддерживается только в браузере Firefox. Итак, если эта статья вас заинтересовала, я смиренно извиняюсь. Вам придется ждать, пока другие браузеры наверстают упущенное. Надеюсь, они заметят боль разработчиков, связанную с margins и рано или поздно дадут нам новые возможности.

Дополнение от переводчика

Вроде всё же есть приём, позволяющий уже сейчас избавиться от необходимости с помощью, например nth-child(3n) убирать правые отступы у Flex-элементов, прилегающих к правому краю контейнера, да еще и корректируя каждый раз, когда меняется количество колонок во Flex-контейнере.

Конечно, он тоже не идеальный и заключается в следующем:

1. В HTML-разметке Flex-контейнер обернуть в дополнительный тег-обертку
2. Для дочерних элементов, например, вместо margin-right: 10px , задавать margin-left: 10px
3. А чтобы компенсировать увеличивающийся левый отступ, необходимо задать для Flex-контейнера свойство с отрицательным значением margin-left: -10px;