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

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

  • автор:

Отступы между блоками на 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

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

Конспект «Флексбокс. Знакомство»

Флексбокс — это CSS-механизм, который позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

Чтобы включить флексбокс, нужно задать элементу свойство display: flex; . После этого:

  1. Элемент с display: flex; превращается во «флекс-контейнер».
  2. Непосредственные потомки этого элемента превращаются во «флекс-элементы» и начинают распределяться по новым правилам.

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

Оси — одно из основных понятий во флексбоксах.

В обычном потоке документа блоки и текст располагаются слева направо и сверху вниз.

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

  • Главной осью flex-контейнера является направление, в соответствии с которым располагаются все его дочерние элементы. Поток флекс-элементов «течёт» вдоль главной оси от её начала к её концу.
  • Поперечной осью называется направление, перпендикулярное главной оси. Вдоль этой оси работают «вертикальные» выравнивания.

Поперечная ось во флексбоксе

По умолчанию главная ось направлена слева направо, но её можно разворачивать во всех направлениях с помощью свойства flex-direction , которое задаётся для флекс-контейнера. Значения свойства:

  • Значение по умолчанию row — главная ось направлена слева направо.
  • column — главная ось направлена сверху вниз.
  • row-reverse — главная ось направлена справа налево.
  • column-reverse — главная ось направлена снизу вверх.

Поперечная ось всегда перпендикулярна главной оси и поворачивается вместе с ней:

  • Если главная ось направлена горизонтально, то поперечная ось смотрит вниз.
  • Если главная ось направлена вертикально, то поперечная ось смотрит направо.

Таким образом, поперечная ось никогда не смотрит вверх или влево, и свойства для поворота поперечной оси нет.

Распределение флекс-элементов

Выравнивание по главной оси

CSS-свойство justify-content определяет то, как будут выровнены элементы вдоль главной оси. Доступные значения justify-content:

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

Выравнивание по поперечной оси

CSS-свойство align-items определяет то, как будут выровнены элементы вдоль поперечной оси. Доступные значения align-items :

  • Значение по умолчанию stretch — элементы растягиваются на всю «высоту» флекс-контейнера.
  • flex-start — элементы располагаются у начала поперечной оси.
  • flex-end — элементы располагаются в конце поперечной оси.
  • center — элементы располагаются по центру поперечной оси.
  • baseline — элементы выравниваются по базовой линии текста внутри них.

Распределение элементов по главной оси задаётся для всего флекс-контейнера и на все флекс-элементы действует одинаково, задать какому-то элементу отличное от других распределение по главной оси нельзя.

Поперечное выравнивание можно задать каждому элементу отдельно. Для этого используется свойство align-self , которое задаётся для самих флекс-элементов, а не для флекс-контейнера. У свойства align-self те же самые значения, что и у align-items .

Перенос флекс-элементов

Если флекс-элементов в контейнере станет больше, чем может уместиться в один ряд, то:

  • Они будут сжиматься до минимально возможной ширины.
  • Даже если им задать ширину, механизм флексбокса может её уменьшить.
  • Если они перестанут помещаться в контейнер и после уменьшения, то выйдут за его пределы, но продолжат располагаться в один ряд.

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

  • Значение по умолчанию nowrap — перенос флекс-элементов на новую строку запрещён.
  • wrap — разрешает перенос флекс-элементов на новую строку. Ряды элементов располагаются вдоль поперечной оси, первый ряд — в начале поперечной оси, последний — в конце.
  • wrap-reverse — также разрешает перенос флекс-элементов на новую строку. Ряды элементов располагаются в обратном порядке: первый — в конце поперечной оси, последний — в начале.

Выравнивание строк флекс-контейнера

Свойство align-content управляет выравниванием рядов флекс-элементов вдоль поперечной оси. У него и свойства justify-content очень похожие значения:

  • Значение по умолчанию stretch — растягивает ряды флекс-элементов, при этом оставшееся свободное место между ними делится поровну. Отображение строк при этом зависит от значения align-items :
    1. Если у align-items задано значение stretch , то элементы в строках растягиваются на всю высоту своей строки.
    2. Если значение отлично от stretch , то элементы в строках ужимаются под своё содержимое и выравниваются в строках в зависимости от значения align-items .
  • flex-start — располагает ряды флекс-элементов в начале поперечной оси.
  • flex-end — располагает ряды флекс-элементов в конце поперечной оси.
  • center — располагает ряды флекс-элементов в середине поперечной оси так, что отступов между соседними рядами нет, а расстояния между первым рядом и краем флекс-контейнера равно расстоянию между последним рядом и другим краем.
  • space-between — равномерно распределяет ряды флекс-элементов вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступов у краёв нет.
  • space-around — равномерно распределяет ряды флекс-элементов вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступы у краёв равны половине расстояния между соседними рядами.
  • space-evenly равномерно распределяет ряды вдоль поперечной оси, расстояния между соседними рядами и у краёв одинаковые.

Свойство align-content «перекрывает» заданное значение align-items , которое управляет выравниванием флекс-элементов вдоль поперечной оси. Это происходит и в случае, когда есть только один ряд флекс-элементов, и когда рядов несколько.

Ранее в спецификации было описано другое поведение:

  • Если есть только один ряд флекс-элементов, то работает align-items .
  • Если есть несколько рядов, то работает align-content .

В начале 2019 года поведение было актуализировано согласно спецификации во всех современных браузерах, теперь его можно встретить только в старых браузерах.

Порядковый номер флекс-элемента

Порядок следования флекс-элементов в потоке можно изменять с помощью свойства order , порядкового номера флекс-элемента, не меняя при этом HTML-код.

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

Применение флексбоксов

Идеальное выравнивание

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

Для этого нужно задать контейнеру раскладку флексбокса, а дочернему флекс-элементу margin: auto . В этом случае флекс-элемент уменьшит свой размер под содержимое и отцентруется по вертикали и горизонтали.

«Гибкое» меню

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

Чтобы это сделать, нужно задать меню раскладку флексбокса, тогда пункты станут флекс-элементами. Затем с помощью свойства распределения элементов justify-content: space-around; можно добиться нужного результата.

Если вы добавите в меню ещё один пункт, отступы между пунктами меню будут «гибко» меняться, подстраиваясь под новые условия.

Сортировка элементов на CSS

Используя одновременно флексбокс и селектор по выделению чекбокса :checked ~ , можно с помощью этого селектора управлять порядком флекс-элементов, изменяя направление главной оси с помощью flex-direction .

Лучше всего эффект работает, когда направление главной оси меняется с «сверху вниз» на «снизу вверх». При этом флекс-контейнер должен находиться в разметке на одном уровне с чекбоксом.

Блоки одинаковой высоты

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

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

  • Наша группа в VK
  • Наш канал на YouTube
  • Наша страница в Twitter
  • Наш канал в Telegram

Простой способ задать отступы между 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

Всё, что нужно знать про флексбоксы: основные термины, свойства флекс-контейнера и флекс-элементов, полезные ссылки по теме.

Время чтения: 12 мин

Открыть/закрыть навигацию по статье

  1. Что это?
  2. Основные термины
  3. Свойства флекс-контейнера
    1. display
    2. flex-direction
    3. flex-wrap
    4. flex-flow
    5. justify-content
    6. align-items
    7. align-content
    8. gap
    1. order
    2. flex-grow
    3. flex-shrink
    4. flex-basis
    5. flex
    6. align-self
    7. Ссылки
    1. Андрей Захаров советует
    2. Егор Левченко советует
    3. Алёна Батицкая советует
    1. Когда нужно использовать flexbox, а когда grid? Бывают ли исключения?

    Контрибьюторы:

    • Егор Левченко ,
    • Светлана Коробцева ,
    • Дмитрий Приходько ,
    • Дима Шелков

    Обновлено 8 марта 2023

    Что это?

    Скопировать ссылку «Что это?» Скопировано

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

    Идея флексбоксов появилась ещё в 2009 году, и этот стандарт до сих пор развивается и прорабатывается. Основная идея флексов — гибкое распределение места между элементами, гибкая расстановка, выравнивание, гибкое управление. Ключевое слово — гибкое, что и отражено в названии (flex — англ. гибко).

    Основные термины

    Скопировать ссылку «Основные термины» Скопировано

    • Флекс-контейнер: элемент, к которому применяется свойство display : flex . Вложенные в него элементы подчиняются правилам раскладки флексов.
    • Флекс-элемент: элемент, вложенный во флекс-контейнер.

    Пример флекс-контейнера и вложенных в него флекс-элементов

    • Основная ось: основная направляющая флекс-контейнера, вдоль которой располагаются флекс-элементы.
    • Поперечная (побочная, перпендикулярная) ось: ось, идущая перпендикулярно основной. Позже вы поймёте, для чего она нужна.

    Наглядный вид основной оси и поперечной оси

    • Начало / конец основной оси: точки в начале и в конце основной оси соответственно. Это пригодится нам для выравнивания флекс-элементов.
    • Начало / конец поперечной оси: точки в начале и в конце поперечной оси соответственно.

    Наглядный вид начала/конца основной оси и начала/конца поперечной оси

    • Размер по основной оси (основной размер): размер флекс-элемента вдоль основной оси. Это может быть ширина или высота в зависимости от направления основной оси.
    • Размер по поперечной оси (поперечный размер): размер флекс-элемента вдоль поперечной оси. Это может быть ширина или высота в зависимости от направления поперечной оси. Этот размер всегда перпендикулярен основному размеру. Если основной размер — это ширина, то поперечный размер — это высота, и наоборот.

    Наглядный вид размера по основной оси и по поперечной оси

    Свойства флекс-контейнера

    Скопировать ссылку «Свойства флекс-контейнера» Скопировано

    display

    Скопировать ссылку «display» Скопировано

     .container  display: flex;> .container  display: flex; >      

    Когда мы задаём какому-то элементу значение flex для свойства display , мы превращаем этот элемент в флекс-контейнер. Внутри него начинает действовать флекс-контекст, его дочерние элементы начинают подчиняться свойствам флексбокса.

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

     .container  display: inline-flex;> .container  display: inline-flex; >      

    Если контейнеру задано значение inline — flex , то снаружи он начинает вести себя как строчный (инлайн) элемент — размеры зависят только от внутреннего контента, встаёт в строку с другими элементами. Внутри это ровно такой же флекс-контейнер, как и при предыдущем значении.

    flex — direction

    Скопировать ссылку «flex-direction» Скопировано

    Свойство управления направлением основной и поперечной осей.

     .container  display: flex; flex-direction: row;> .container  display: flex; flex-direction: row; >      
    • row (значение по умолчанию) — основная ось идёт горизонтально слева направо, поперечная ось идёт вертикально сверху вниз.
    • row — reverse — основная ось идёт горизонтально справа налево, поперечная ось идёт вертикально сверху вниз.
    • column — основная ось идёт вертикально сверху вниз, поперечная ось идёт горизонтально слева направо.
    • column — reverse — основная ось идёт вертикально снизу вверх, поперечная ось идёт горизонтально слева направо.

    Пример свойства flex-direction

    Пример свойства flex-wrap

    flex — flow

    Скопировать ссылку «flex-flow» Скопировано

    Это свойство-шорткат для одновременного определения значений свойств flex — direction и flex — wrap .

     .container  display: flex; flex-flow: column wrap;> .container  display: flex; flex-flow: column wrap; >      
     .container  display: flex; flex-flow: row nowrap;> .container  display: flex; flex-flow: row nowrap; >      

    Пример свойства флекс-элементов order

    flex — grow

    Скопировать ссылку «flex-grow» Скопировано

     .container  display: flex;> .item  flex-grow: 1;> .container  display: flex; > .item  flex-grow: 1; >      

    Это свойство указывает, может ли вырастать флекс-элемент при наличии свободного места, и насколько. По умолчанию значение равно 0. Значением может быть любое положительное целое число (включая 0).

    Если у всех флекс-элементов будет прописано flex — grow : 1 , то свободное пространство в контейнере будет равномерно распределено между всеми.

    Если при этом одному из элементов мы зададим flex — grow : 2 , то он постарается занять в два раза больше свободного места, чем его соседи.

    flex — shrink

    Скопировать ссылку «flex-shrink» Скопировано

     .container  display: flex;> .item  flex-shrink: 3;> .container  display: flex; > .item  flex-shrink: 3; >      

    Свойство flex — shrink полностью противоположно свойству flex — grow . Если в контейнере не хватает места для расположения всех элементов без изменения размеров, то свойство flex — shrink указывает, в каких пропорциях элемент будет уменьшаться.

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

    Значение по умолчанию — 1. Значением может быть любое целое положительное число (включая 0).

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

    flex — basis

    Скопировать ссылку «flex-basis» Скопировано

     .container  display: flex;> .item  flex-basis: 250px;> .container  display: flex; > .item  flex-basis: 250px; >      

    Свойство flex — basis указывает на размер элемента до того, как свободное место будет распределено (см. flex-grow).

    Значением может быть размер в любых относительных или абсолютных единицах: 20rem , 5vw , 250px . А также можно использовать ключевое слово auto (значение по умолчанию). В этом случае при расчёте размера элемента будут приниматься во внимание значения свойств width , max — width , min — width или аналогичные свойства высоты, в зависимости от того, в каком направлении идёт основная ось.

    Если никакие размеры не заданы, а свойству flex — basis установлено значение auto , то элемент занимает столько пространства, сколько нужно для отображения контента.

    flex

    Скопировать ссылку «flex» Скопировано

     .container  display: flex;> .item  flex: 1 1 auto;> .container  display: flex; > .item  flex: 1 1 auto; >      

    Свойство-шорткат, с помощью которого можно указать значение трёх свойств одновременно: flex — grow , flex — shrink и flex — basis . Первое значение является обязательным, остальные опциональны.

    Значение по умолчанию: 0 1 auto , что расшифровывается как flex — grow : 0 , flex — shrink : 1 , flex — basis : auto .

     /* 0 0 auto */flex: none; /* Одно значение, число без единиц: flex-grow */flex: 2; /* Одно значение, ширина/высота: flex-basis */flex: 10em;flex: 30px;flex: auto;flex: content; /* Два значения: flex-grow | flex-basis */flex: 1 30px; /* Два значения: flex-grow | flex-shrink */flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%; /* Глобальные значения */flex: inherit;flex: initial;flex: unset; /* 0 0 auto */ flex: none; /* Одно значение, число без единиц: flex-grow */ flex: 2; /* Одно значение, ширина/высота: flex-basis */ flex: 10em; flex: 30px; flex: auto; flex: content; /* Два значения: flex-grow | flex-basis */ flex: 1 30px; /* Два значения: flex-grow | flex-shrink */ flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Глобальные значения */ flex: inherit; flex: initial; flex: unset;      

    align — self

    Скопировать ссылку «align-self» Скопировано

     .container  display: flex; align-items: flex-start;> .item  align-self: flex-end;> .container  display: flex; align-items: flex-start; > .item  align-self: flex-end; >      

    При помощи этого свойства можно выровнять один или несколько элементов иначе, чем задано у родительского элемента. Например, в коде выше у родителя задано выравнивание вложенных элементов по верхнему краю родителя. А для элемента с классом .item мы задаём выравнивание по нижнему краю.

    Ссылки

    Скопировать ссылку «Ссылки» Скопировано

    1. Как реально работает flex — grow
    2. Как реально работает flex — shrink
    3. Песочница Флексбоксов
    4. Game: Flexbox Froggy
    5. Game: Flexbox Defense
    6. Game: Flexbox Ducky
    7. Курс по Флексбоксам от Wes Bos

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *