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

Добавил пользователь Валентин П.
Обновлено: 10.09.2024

Выравнивание, вероятно, самый запутанный аспект flexbox. Модуль макета flexbox имеет несколько свойств выравнивания, которые ведут себя по-разному в разных обстоятельствах, и при их использовании вы не всегда можете понять, что происходит или почему. Однако, если вы знаете, на что обратить внимание, выравнивание не такое сложное, как кажется на первый взгляд. Это руководство поможет вам полностью разобраться в Flexbox выравнивании.

История о двух осях

При использовании flexbox мы работаем с двумя осями: основной и поперечной. Как показывают их имена, эти оси образуют иерархическое соотношение, в котором основная ось выше поперечной.

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

Это иерархическое соотношение является основным различием между flexbox и CSS Grid Layout. По структуре CSS grid имеет две неиерархические оси: ось строк и ось столбцов. Это связано с тем, что разработчики веб-стандартов предполагают, что CSS grid будет использоваться в качестве двумерной модели макета. С другой стороны, Flexbox имеет одну основную и одну вторичную ось, поскольку является одномерной моделью макета. Самое классное в flexbox это то, что вы можете определить направление этого одного измерения, установив направление главной оси, поэтому вы можете создавать оба варианта, макеты на основе строк и макеты на основе столбцов.

Чтобы избежать путаницы в свойствах выравнивания, всегда имейте в виду, что когда вы используете flexbox, вы работаете с одномерной моделью. Даже если ваш макет выглядит так, будто он имеет два измерения (т. е. строки и столбцы), flex элементы могут следовать только в одном направлении, вдоль главной оси. Вы можете распределить flex элементы по главной оси и выровнять расстояние между отдельными элементами по поперечной оси.

Начнем с установки основной оси

Направление основной оси определяется свойством flex-direction - существует четыре возможных значения:

flex-direction: row; – основная ось идет слева направо (это значение по умолчанию)
flex-direction: row-reverse; – основная ось идет справа налево
flex-direction: column; – основная ось идет сверху вниз
flex-direction: column-reverse; – основная ось идет снизу вверх

Давайте посмотрим, как это выглядит в браузере. Я использую очень простую HTML-разметку, всего девять элементов, расположенных один над другим:

Внешний div с классом .container будет flex контейнером, а внутренние div-вы с классом .item будут flex элементами.

1. Слева направо: row

Как уже упоминалось, в flex направление по умолчанию - row ; если вы ничего не установили, это и будет используемое значение. Как вы можете видеть ниже, я добавила свойства, относящиеся к flexbox, только к flex контейнеру. Flex элементы получили несколько свойств для декорации:

Когда flex-direction установлено как row , основная ось идет горизонтально, слева направо. Следовательно, это и есть направление, вдоль которого расположены flex элементы. Поперечная ось проходит перпендикулярно, сверху вниз, и когда элементы достигают края контейнера, они перестраиваются в этом направлении.

2. Слева направо: row-reverse

Когда flex-direction присваивается значение row-reverse , положение осей остается неизменным, что означает, что основная ось будет проходить горизонтально, а поперечная ось вертикально. Однако, направление строк будет изменено на противоположное: справа налево вдоль основной оси.

Если вы посмотрите на нумерацию flex элементов, вы увидите, что теперь каждая строка пронумерована справа налево, но элементы все еще переходят вертикально вниз.

Если вы также хотите изменить направление поперечной оси, вам нужно использовать значение wrap-reverse для свойства flex-wrap . Посмотрите на отличия:

3. Сверху вниз: column

Когда flex-direction установлено как column , основная и поперечная оси меняют свои позиции. Основная ось будет проходить вертикально (сверху вниз), а поперечная ось будет идти горизонтально (слева направо).

Теперь вы увидите, что нумерация элементов flex идет не в строку, а в столбец. Здесь одномерная природа flexbox, вероятно, наиболее заметна. Элементы будут перестраиваться только в том случае, если контейнеру задана фиксированная высота.

4. Снизу вверх: column-reverse

Надеюсь вы посмотрите следующий пример. Когда flex-direction установлено как column-reverse , основная ось остается вертикальной, а поперечная ось по-прежнему горизонтальной, как мы видели в предыдущем примере. Однако, направление столбца меняется на противоположное, поэтому основная ось идет снизу вверх.

Как вы можете видеть ниже, нумерация элементов flex начинается в левом нижнем углу, перемещаясь вверх и вправо.

Опять же, чтобы изменить направление поперечной оси, вам нужно использовать wrap-reverse для свойства flex-wrap .

Сокращение flex-flow

Свойство flex-flow является сокращением для flex-direction и flex-wrap . Например, вы можете использовать:

Свойства выравнивания Flexbox

Выравнивание в Flexbox может быть как по основной, так и по поперечной оси.

Одно из свойств ( justify-content ) принадлежит главной оси, а остальные три ( align-items , align-self , align-content ) относятся к поперечной оси.

Как и следовало ожидать, поведение свойств выравнивания зависит от свойства flex-direction. Например, justify-content выравнивает элементы горизонтально, если flex-direction установлено как row или row-revers , а также вертикально, если flex-direction установлено как column или column-revers . Это настоящая красота гибкого контейнера.

Выравнивание вдоль основной оси

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

flex-start - flex элементы расположены вначале основной оси (это значение по умолчанию)
flex-end - flex элементы расположены в конце основной оси
center - flex элементы расположены в центре основной оси
space-between - flex элементы распределены равномерно вдоль основной оси, от flex-start до flex-end
space-around - flex элементы равномерно распределены вдоль основной оси, но отступы половинного размера добавляются с каждого конца

Чтобы правильно использовать свойство justify-content , вам нужно обратить внимание на направление ваших осей. Например, правило justify-content: flex-start; всегда располагает flex элементы в начале основной оси. Слева, когда flex-direction установлено как row , справа - когда установлено как row-revers , сверху - когда установлено как column и снизу - когда установлено как column-revers .

Следующая codepen демонстрация показывает, как различные значения свойства justify-content выравнивают flex элементы, когда свойство flex-direction установлено как row .

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

Время перейти на следующий уровень. Вы можете использовать три свойства CSS для выравнивания элементов вдоль поперечной оси. Два из них ( align-items и align-self ) предназначены для однострочного выравнивания, а align-content для выравнивания по многострочной линии.

Однострочное выравнивание

Элементы align-items и align-self определяют, как пространство распределяется между элементами flex вдоль поперечной оси. На самом деле, оба делают то же самое, но в то время как align-items выравнивают все элементы внутри flex контейнера, align-self переопределяет выравнивание по умолчанию для отдельных flex элементов.

Оба могут принимать следующие значения:

auto - заставляет свойство align-self наследовать значение align-items (по умолчанию для align-self)
flex-start - flex элементы выровнены от начала поперечной оси
flex-end - flex элементы выровнены от конца поперечной оси
center - flex элементы выровнены по центру поперечной оси
baseline - flex элементы выровнены от их базовой линии вверх
stretch - flex элементы растянуты вдоль поперечной оси так, чтобы заполнить flex контейнер (по умолчанию для align-items)

Codepen ниже показывает, как свойства align-items и align-self ведут себя когда, flex-direction установлено как row . Поперечная ось по умолчанию проходит сверху вниз. Элементы имеют разные внутренние отступы (padding), чтобы изменить их высоты и базовые линии. Например, вы можете увидеть, что значение flex-start выравнивает элементы от начала поперечной оси, тогда как flex-end выравнивает их от конца.

Естественно, когда flex-direction - column или column-revers , вы будете работать с макетом на основе столбцов, свойства align-items и align-self будут выравнивать элементы по горизонтали.

Многострочное выравнивание

Свойство align-content делает возможным многострочное выравнивание вдоль поперечной оси. Оно определяет, как строки flex элементов отступают друг от друга. Свойство align-content не влияет на контейнер с одной строкой flex (например, когда содержимое не переносится). Оно может принимать шесть различных значений:

flex-start - flex элементы выровнены от начала поперечной линии
flex-end - flex элементы выровнены от конца поперечной оси
center - flex элементы выровнены по центру поперечной оси
space-between - flex элементы распределены равномерно вдоль поперечной оси между flex-start и flex-end
space-around - flex элементы распределены равномерно вдоль поперечной оси, но отступы половинного размера добавляются с каждого конца
stretch - flex элементы растянуты вдоль поперечной оси так, чтобы заполнить flex контейнер (это значение по умолчанию)

Ниже вы можете увидеть различные демонстрации в codepen, показывающие, как работают разные значения свойства align-content . Как и в случае с нашими другими демонстрациями, применено направление оси по умолчанию.

Эти первые два примера не имеют однострочного свойства ( align-items ), поэтому вы заметите, что все элементы растягиваются по умолчанию. В следующем примере мы установим align-items: flex-start; так, что элементы будут выравниваться по направлению к началу поперечной оси, а align-content: flex-end; мы установим так, что содержимое будет выровнено по направлению к концу оси:

Если вы поняли все, что мы до этого прошли, то вы очень хорошо потрудились. Теперь у вас есть хорошее базовое понимание flexbox выравнивания.

Заключение

Мы закончили! Напомню: самое главное, что необходимо помнить, это то, что вам нужно учитывать направления основной и поперечной осей. Всегда начинайте выравнивание, с установки свойства flex-direction . Чтобы узнать больше о flexbox выравнивании и применить свои знания на практике, вы можете посмотреть следующие ресурсы:

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

CSS Flexible Box Layout Module (CSS модуль для макетов с гибкими блоками), коротко flexbox (Флексбокс), создана, чтобы убрать недостатки при создании самых разных HTML конструкций, в том числе адаптированных под разную ширину и высоту, и сделать верстку логичной и простой. А логичный подход, как правило работает в неожиданных местах, там где результат не проверялся - логика наше все!

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

Базовые знания
CSS свойства Flexbox
Для контейнера
display:
flex-direction:
flex-wrap:
flex-flow: direction wrap
justify-content:
align-content:
align-items:
column-gap:
gap:
Для элементов контейнера
flex-grow:
flex-shrink:
flex-basis:
flex:
align-self:
order:
Заметки
Примеры Flex верстки
Поддержка браузерами - 99%
Видео
Полезные ссылки по Flex

Базовые знания

FlexBox состоит из Контейнера и его Дочерних элементов (items) (гибких элементов).

Главная ось - главное направление движения элементов внутри контейнера. Направление главной оси можно изменить с помощью свойства flex-direction. Обратите внимание, что при смене осей, меняются только направления движения блоков внутри, а начало, конец и размер контейнера остаются прежними.

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

Поперечная ось - направление движения элементов, когда они не умещаются в контейнер по направлению главной оси. Поперечная ось всегда перпендикулярна (?) главной.

Начало и конец поперечной оси - по поперечной оси заполняются ряды от начала и до конца контейнера. В каждом таком ряду располагаются элементы (читайте ниже).

Для включения flexbox, любому HTML элементу достаточно присвоить css свойство display:flex; или display:inline-flex; .

После включения flex свойства, внутри контейнера создаются две оси: главная и поперечная (перпендикулярная (?), кросс ось). Все вложенные элементы (первого уровня) выстраиваются по главной оси. По умолчанию главная ось горизонтальная и имеет направление слева направо (->), а кросс ось соответственно вертикальная и направлена сверху вниз (?).

CSS свойства, которые могут влиять на модель построения макета: float , clear , vertical-align , columns не работают во flex конструкции. Тут используется другая модель построения макета и эти css свойства просто игнорируются.

CSS свойства Flexbox

Flexbox содержит разные css правила для управления всей flex конструкцией. Одни нужно применять к основному контейнеру, а другие к элементам этого контейнера.

Для контейнера

Включает flex свойство для элемента. Под это свойство попадает сам элемент и вложенные в него элементы: затрагиваются только потомки первого уровня - они станут элементами flex контейнера.

flex - элемент растягивается на всю ширину и имеет свое полное пространство среди окружающих блоков. Происходит перенос строк в начале и в конце блока.
inline-flex - элемент обтекается другими элементами. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.

flex и inline-flex отличаются тем что по-разному взаимодействуют с окружающими элементами, подобно display:block и display:inline-block .

Изменяет направление главной оси контейнера. Поперечная ось меняется соответственно.

row (default) - направление элементов слева направо (->)
column - направление элементов сверху вниз (?)
row-reverse - направление элементов справа налево (<-)
column-reverse - направление элементов снизу вверх (?)

Нужно понимать, что при переходе с row на column или с row-reverse на column-reverse меняется только направление осей и больше ничего. Начало и конец расположения блоков остается неизменным (см. картинку в начале). Т.е. если при row элементы начинали свой путь справа/сверху, то при column все останется также - изменится только направление. (см. пример свойства flex-wrap)

Управляет переносом непомещающихся в контейнер элементов.

nowrap (default) - вложенные элементы располагаются в один ряд (при direction=row) или в одну колонку (при direction=column) независимо от того помещаются они в контейнер или нет.
wrap - включает перенос элементов на следующий ряд, если они не помещаются в контейнер. Так включается движение элементов по поперечной оси.
wrap-reverse - тоже что wrap только перенос будет не вниз, а вверх (в обратном направлении).

Объединяет оба свойства flex-direction и flex-wrap . Они часто используются вместе, поэтому чтобы писать меньше кода было создано свойство flex-flow .

flex-flow принимает значения двух этих свойств, разделенные пробелом. Или можно указать одно значение любого свойства.

Выравнивает элементы по основной оси: если direction=row, то по горизонтали, а если direction=column, то по вертикали.

flex-start (default) - элементы будут идти с начала (в конце может остаться место).
flex-end - элементы выравниваются по концу (место останется в начале)
center - по центру (место останется слева и права)
space-between - крайние элементы прижимаются к краям (место между элементами распределяется равномерно)
space-around - свободное пространство равномерно распределяется между элементами (крайние элементы не прижимаются к краям). Пространство между краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
space-evenly - тоже что space-around , только расстояние у крайних элементов до краев контейнера такое же как и между элементами.

Выравнивает ряды, в которых находятся элементы по поперечной оси. То же что justify-content только для противоположной оси.

Заметка: Работает только когда высота контейнера фиксированная (выше чем ряды внутри него).

Т.е. если flex-direction: row , то это свойство будет выравнивать невидимые ряды по вертикали ¦ . Тут важно заметить, что высота блока должна быть задана жестко и должна быть больше высоты рядов иначе сами ряды будут растягивать контейнер и любое их выравнивание теряет смысл, потому что между ними нет свободного места. А вот когда flex-direction: column , то ряды движется по горизонтали -> и ширина контейнера почти всегда больше ширины рядов и выравнивание рядов сразу приобретает смысл.

Это свойство мало где нужно и вместо него чаще используется align-items (см.ниже).

stretch (default) - ряды растягиваются заполняя строку полностью
flex-start - ряды группируются в верхней части контейнера (в конце может остаться место).
flex-end - ряды группируются в нижней части контейнера (место останется в начале)
center - ряды группируются по центру контейнера (место останется по краям)
space-between - крайние ряды прижимаются к краям (место между рядами распределяется равномерно)
space-around - свободное пространство равномерно распределяется между рядами (крайние элементы не прижимаются к краям). Пространство между краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
space-evenly - тоже что space-around , только расстояние у крайних элементов до краев контейнера такое же как и между элементами.

Выравнивает элементы по поперечной оси внутри ряда (невидимой строки). Т.е. сами ряды выравниваются через align-content , а элементы внутри этих рядов (строк) через align-items и все это по поперечной оси. По главной оси такого разделения нет, там нет понятия рядов и элементы выравниваются через justify-content .

stretch (default) - элементы растягиваются заполняя строку полностью
flex-start - элементы прижимаются к началу ряда
flex-end - элементы прижимаются к концу ряда
center - элементы выравниваются по центру ряда
baseline - элементы выравниваются по базовой линии текста

Задает размер промежутка между элементами контейнера. Соответственно:

column-gap: — раздвигает только колонки.
gap: — раздвигает и колонки и ряды.

Размеры можно указать в абсолютных или относительных величинах: px, em, . или в % .

Поддержка gap ( у column-gap поддержка точно такая же ):

Для элементов контейнера

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

По умолчанию flex-grow: 0

Если всем элементам указать flex-grow:1 , то все они растянуться одинаково и заполнять все свободное место в контейнере.
Если одному из элементов указать flex-grow:1 , то он заполнит все свободное место в контейнере и выравнивания через justify-content работать уже не будут: свободного места нет выравнивать нечего.
При flex-grow:1 . Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные
Если все flex-блоки внутри flex-контейнера имеют flex-grow:3 , то они будут одинакового размера
При flex-grow:3 . Если один из них имеет flex-grow:12 , то он будет в 4 раза больше, чем все остальные

Как это работает? Допустим, что контейнер имеет ширину 500px и содержит два элемента, каждый из которых имеет базовую ширину 100px. Значит в контейнере остается 300 свободных пикселей. Теперь, если первому элементу укажем flex-grow:2; , а второму flex-grow: 1; , то блоки займут всю доступную ширину контейнера и ширина первого блока будет 300px, а второго 200px. Объясняется это тем, что доступные 300px свободного места в контейнере распределились между элементами в соотношении 2:1, +200px первому и +100px второму.

Заметка: в значении можно указывать дробные числа, например: 0.5 - flex-grow:0.5

Задает коэффициент уменьшения элемента. Свойство противоположное flex-grow и определяет как элемент должен сжиматься, если в контейнере не остается свободного места. Т.е. свойство начинает работать, когда сумма размеров всех элементов больше чем размер контейнера.

По умолчанию flex-shrink:1

Допустим, что контейнер имеет ширину 600px и содержит два элемента, каждый из которых имеет ширину 300px - flex-basis:300px; . Т.е. два элемента полностью заполняют контейнер. Первому элементу укажем flex-shrink: 2; , а второму flex-shrink: 1; . Теперь уменьшим ширину контейнера на 300px, т.е. элементы должны сжаться на 300px чтобы находится внутри контейнера. Сжиматься они будут в соотношении 2:1, т.е. первый блок сожмется на 200px, а второй на 100px и новые размеры элементов станут 100px и 200px.

Заметка: в значении можно указывать дробные числа, например: 0.5 - flex-shrink:0.5

Устанавливает базовую ширину элемента - ширину до того как будут высчитаны остальные условия влияющие на ширину элемента. Значение можно указать в px, em, rem, %, vw, vh и т.д. Итоговая ширина будет зависеть от базовой ширины и значений flex-grow, flex-shrink и контента внутри блока. При auto элемент получает базовую ширину относительно контента внутри него.

По умолчанию: auto

Иногда лучше установить ширину элемента жестко через привычное свойство width . Например, width: 50%; будет означать, что элемент внутри контейнера будет ровно 50%, однако при этом все также будут работать свойства flex-grow и flex-shrink . Такое может быть нужно, когда элемент растягивается контентом внутри него, больше указанного во flex-basis. Пример смотрите в заметках.

Короткая запись трех свойств: flex-grow flex-shrink flex-basis .

По умолчанию: flex: 0 1 auto

Однако можно указать и одно, и два значения:

Позволяет изменить свойство align-items , только для отдельного элемента.

По умолчанию: от align-items контейнера

stretch - элемент растягиваются заполняя строку полностью
flex-start - элемент прижимаются к началу строки
flex-end - элемент прижимаются к концу строки
center - элемент выравниваются по центру строки

baseline - элемент выравниваются по базовой линии текста

Позволяет менять порядок (позицию, положение) элемента в общем ряду.

По умолчанию: order: 0

По умолчанию элементы имеют order: 0 и ставятся в порядке их появления в HTML коде и направления ряда. Но если изменить значение свойства order, то элементы будут выстраиваться в порядке значений: -1 0 1 2 3 . . Например если одному из элементов указать order: 1 , то сначала будут идти все нулевые, а потом элемент с 1.

Так можно, например, первый элемент перекинуть в конец, при этом не меняя направление движения остальных элементов или HTML код.

Заметки

Чем отличается flex-basis от width?

Ниже важные различия между flex-basis и width / height:

flex-basis работает только для главной оси. Это значит что при flex-direction:row flex-basis контролирует ширину (width), а при flex-direction:column контролирует высоту (height). Смотрите пример.

flex-basis применяется только к flex элементам. А значит если отключить flex у контейнера это свойство не будет иметь эффекта.

Абсолютные элементы контейнера не участвуют во flex конструкции. А значит, flex-basis не влияет на элементы flex контейнера, если они абсолютны position:absolute . Им нужно будет указать width / height.

По возможности все же отдавайте предпочтение flex-basis. Используйте width только когда не подходит flex-basis.

Отличие flex-basis от width - баг или фича?

Контент внутри flex элемента распирает его и не может выйти за его пределы. Однако если установить ширину через width или max-width , а не flex-basis , то элемент внутри flex контейнера сумеет выйти за пределы этого контейнера (иногда нужно именно такое поведение). Пример:

Примеры Flex верстки

В примерах нигде не используются префиксы для кроссбраузерности. Сделал я так для удобного чтения css. Поэтому примеры смотрите в последних версиях Chrome или Firefox.

Начнем с самого простого примера - выравнивание по вертикали и горизонтали одновременно и при любой высоте блока, даже резиновой.

Или так, без блока внутри:

Чтобы расположить элементы контейнера по краям и произвольно выбрать элемент после которого будет разрыв, нужно использовать свойство margin-left:auto или margin-right:auto .

Сделаем меню в самом верху страницы. На широком экране оно должно быть справа. На среднем выравниваться по середине. А на маленьком каждый элемент должен быть на новой строке.

Этот пример показывает как быстро и удобно сделать 3 колонки, которые при сужении будут превращаться в 2 и затем в 1.

Обратите внимание, что сделать это можно без использования media правил, все на flex.

Допустим нам нужно вывести 3 блока, один большой и два маленьких. При этом нужно чтобы блоки подстраивались под маленькие экраны. Делаем:

Этот пример показывает как быстро можно сделать симпатичный аккордеон с картинками на flex. Обратите внимание на свойство transition для flex.

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

Для решения этой задачи, сами блоки растягиваются флексом и им установлена максимально возможная ширина. Каждый внутренний блок также является флекс конструкцией, с повернутой осью flex-direction:column; и элемент в середине (где находится текст) растягивается flex-grow:1; чтобы заполнить всё свободное пространство, так достигается результат - текст начинался с одной линии.

Еще примеры

Поддержка браузерами - 99%

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

Чтобы знать какие префиксы актуальны на сегодня (июнь. 2019), приведу пример всех flex правил с нужными префиксами:

Лучше если свойства с префиксами будут идти до оригинального свойства.
В этом списке нет ненужных на сегодня (по caniuse) префиксов, но вообще префиксов больше.

Видео

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

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

Как использовать Flexbox

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

Для этого необходимо определить родительский контейнер как display flex CSS :

Затем нужно установить размер дочерних элементов и с помощью margin: auto задать их равномерное распределение в пределах родительского контейнера:

Свойства родительского элемента flexbox

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

Свойства контейнера flexbox

Display

Свойство display позволяет определить div в качестве контейнера:

Flex-direction

CSS flex direction позволяет определить направление, в котором дочерние элементы будут распространяться ( четыре значения ):

row — слева направо;
row-reverse — справа налево;
column — сверху вниз;
column-reverse — снизу вверх.

Пример слева направо

Пример справа налево

П ример сверху вниз

Пример снизу вверх

flex-wrap

По умолчанию flexbox располагает дочерние элементы в одну строку. Но, изменив значение flex-wrap , можно разрешить их перенос на новую строку:

nowrap — одна строка, слева направо;
wrap — несколько строк, слева направо;
wrap-reverse — несколько строк, справа налево.

Пример несколько строк слева направо

Пример несколько строк справа налево

flex-flow

Flex-flow позволяет объединить два описанных выше свойства в одно. Это сокращенное свойство, определяющее flex-direction и flex-wrap :

justify-content

Определяет, как размещаются внутри div контейнера дочерние элементы. Доступно пять различных значений этого свойства CSS flex :

flex-start — выравнивает элементы по началу контейнера;
flex-end — выравнивает элементы по концу контейнера;
center — выравнивает элементы по центру;
space-between — элементы размещаются с одинаковыми отступами друг от друга, первый элемент выравнивается по началу контейнера, последний элемент — по концу контейнера;
space-around — для элементов задаются одинаковые отступы со всех сторон.

align-items

Align-items позволяет выровнять элементы по вертикальной оси. Доступно пять различных значений этого свойства CSS flex :

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

align-content

Выравнивает контент и пространство между полями, когда контент перемещается на несколько строк. Доступно шесть значений этого свойства CSS flex 1 :

flex-start — несколько строк будут смещены к началу контейнера;
flex-end — несколько строк будут смещены к концу контейнера;
center — несколько строк будут размещены по центру;
space-between — для нескольких строк будет задано одинаковое расстояние между ними;
space-around — для нескольких строк будет задано одинаковое расстояние вокруг них;
stretch — несколько строк будут растягиваться, чтобы занять все пространство.

Свойства дочерних элементов flexbox

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

order

По умолчанию дочерние элементы размещаются в том же порядке, в котором они размещаются в DOM . Но с помощью свойства order можно изменить порядок блоков:

flex-grow

По умолчанию все элементы в CSS flex будут принимать одинаковые размеры по ширине. Но с помощью свойства flex-grow можно сделать так, чтобы отдельные элементы растягивались в несколько раз больше, чем остальные.

Например, если для всех элементов задано значение flex-grow 1 , а для одного элемента — 2, то он будет в два раза шире других элементов:

flex-shrink

Flex-shrink определяет, каким образом элементы будут сжиматься.

Реальные примеры

Применяя описанные выше свойства flexbox в различных комбинациях, можно создавать разнообразные шаблоны. Рассмотрим примеры использования Flexbox.

Меню навигации

Основное преимущество CSS flex заключается в том, что элементы могут адаптироваться. Когда размеры экрана изменяются, flexbox изменяет ширину блоков, чтобы они соответствовали родительскому контейнеру. Данная технология использует процентное значение размеров по отношению к родительскому контейнеру, что и позволяет элементам навигации легко адаптироваться к размеру экрана.

Очень просто перейти к размерам на всю ширину экрана устройства, изменив способ, с помощью которого flexbox реагирует на изменения.

Посмотрите, как в приведенном выше примере элементы реагируют на различные размеры экрана. Ниже приведен код HTML и CSS , с помощью которых можно создать адаптивное меню навигации с использованием flexbox :

Столбцы одинаковой высоты

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

Посмотрите, как можно создать столбцы одинаковой высоты с помощью CSS flex 1 .

Код HTML и CSS , с помощью которых можно создать такой макет:

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

Центрирование по вертикали

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

Но с помощью flexbox это делается еще проще. Для этого используются два свойства CSS flex1:justify-content и align-items .

Изменение порядка вывода элементов с помощью медиа-запросов

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

С помощью display flex CSS мы можем изменить порядок вывода различных разделов. Можно переместить блок основного контента перед левым сайдбаром.

Чтобы изменить порядок вывода дочерних элементов, нужно добавить для элемента свойство order и указать, на какой позиции он должен отображаться:

Теперь порядок размещения будет следующим:

Основной контент;
Заголовок;
Правая боковая панель;
Левая боковая панель;
Подвал.

Просмотрите приведенную ниже демо-версию. Измените размеры окна браузера, чтобы увидеть, как меняются местами области страницы.

Поддержка браузерами

Сейчас flexbox поддерживается в 88% браузеров:

Chrome 21+ поддерживает flexbox без префикса;
Firefox 22+ поддерживает flexbox без префикса;
Safari поддерживает flexbox с префиксом – webkit ;
Opera 12.1+ поддерживает flexbox без префикса;
IE 10 поддерживает flexbox с префиксом -MS , но уже IE11 поддерживает flexbox без префикса.

Баги flexbox

На Github существует проект со списком ошибок CSS flex и способами, как их можно обойти, пока проблема не будет устранена в движках браузеров.

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, отклики, дизлайки, лайки!

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

CSS Flexbox позволяет создать адаптивный дизайн намного проще, чем с использованием Float и позиционирования.

Flexbox можно использовать как для CSS разметки целой страницы, так и её отдельных блоков.

Поддержка CSS Flexbox браузерами

CSS Flexbox поддерживается всеми используемые на сегодняшний момент современными браузерами (с использованием префиксов: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+).

Основы CSS Flexbox

Создание CSS разметки с помощью Flexbox начинается с установки необходимому HTML элементу CSS-свойства display со значением flex или flex-inline .

После этого данный элемент становится flex-контейнером , а все его непосредственные дочерние элементы – flex-элементами . При этом когда мы говорим о flexbox то подразумеваем под этим только элемент с display:flex или display:flex-inline и все элементы непосредственно расположенные в нём. Таким образом в CSS Flexbox имеется всего два типа элементов: flex-контейнер и flex-элемент.

В CSS для поддержки макета большинством браузеров добавлены свойства с префиксами и max-width .

В качестве примера разметим посредством flexbox ещё футер и создадим в элементе .col__article блок состоящий из трёх элементов (минимальная ширина одного элемента - 300px). В футере разместим четыре блока (минимальная ширина одного блока - 200px).

Читайте также: