Руководство по флексбоксам


Содержание

CSS Flexbox

Модуль компоновки CSS Flexbox

Перед модулем компоновки Flexbox было четыре режима компоновки:

  • Блок, для разделов на веб-странице
  • Встроенный, для текста
  • Таблица для двумерных табличных данных
  • Положение, для явного положения элемента

Модуль компоновки гибких коробок упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования.

Flexbox элементы

Чтобы начать использовать модель Flexbox, необходимо сначала определить контейнер Flex.

Этот элемент представляет собой контейнер Flex (синяя область) с тремя элементами Flex.

Пример

Гибкий контейнер с тремя гибкими элементами:

Родительский элемент (контейнер)

Гибкий контейнер становится гибким, установив display свойство в значение Flex:

Пример

Свойства контейнера Flex:

Свойство Flex-Direction

Свойство flex-direction определяет, в каком направлении контейнеру требуется стек элементов Flex.

Пример

Значение Column суммирует элементы Flex по вертикали (сверху вниз):

Пример

Значение столбец-реверс суммирует элементы Flex по вертикали (но снизу вверх):

Пример

Значение Row суммирует элементы Flex горизонтально (слева направо):

Пример

Значение строка-реверс суммирует элементы Flex горизонтально (но справа налево):

Свойство Flex-Wrap

Свойство flex-wrap указывает, должны ли элементы Flex обернуть или нет.

Приведенные ниже примеры имеют 12 элементов Flex, чтобы лучше продемонстрировать свойство flex-wrap .

Пример

Значение Wrap указывает, что элементы Flex будут обтекать при необходимости:

Пример

Значение UN Wrap указывает, что элементы Flex не будут обтекать (по умолчанию):

Пример

Значение Wrap-Reverse указывает, что гибкие элементы будут при необходимости обернуты в обратном порядке:

Свойство Flex-Flow

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

Пример

Свойство «выравнивание-содержимое»

Свойство justify-content используется для выравнивания элементов Flex:

Пример

Значение Center выравнивает элементы Flex в центре контейнера:

Пример

Значение Flex-Start выравнивает элементы Flex в начале контейнера (по умолчанию):

Пример

Значение Flex-End выравнивает элементы Flex в конце контейнера:

Пример

Значение пространство вокруг отображает элементы Flex с пробелами до, между и после строк:

Пример

Значение пробел-между отображает элементы Flex с интервалом между строками:

Свойство Выравнивание-элементы

Свойство align-items используется для выравнивания элементов Flex по вертикали.

В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать свойство align-items .

Пример

Значение Center выравнивает элементы Flex в середине контейнера:

Пример

Значение Flex-Start выравнивает элементы Flex в верхней части контейнера:

Пример

Значение Flex-End выравнивает элементы Flex в нижней части контейнера:

Пример

Значение Stretch растягивает элементы Flex для заполнения контейнера (по умолчанию):

Пример

Значение Базовая линия выравнивает элементы Flex, такие как Выравнивание базовых линий:

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:

Свойство выравнивания содержимого

Свойство align-content используется для выравнивания гибких линий.

В этих примерах мы используем контейнер высотой 600 пикселей с свойством Flex-Wrap, который имеет значение Wrap, чтобы лучше продемонстрировать align-content свойство.

Пример

Значение пробел-между отображает гибкие линии с равным пространством между ними:

Пример

Значение пространство вокруг отображает гибкие линии с пробелами до, между и после них:

Пример

Значение Stretch растягивает гибкие линии, чтобы занять оставшееся пространство (по умолчанию):

Пример

Значение Center отображает гибкие линии в середине контейнера:

Пример

Значение Flex-Start отображает гибкие линии в начале контейнера:

Пример

Значение Flex-End отображает гибкие линии в конце контейнера:

Идеальное центрирование

В следующем примере мы решим очень распространенную проблему стиля: идеальное центрирование.

Решение: Задайте для свойств justify-content и align-items значение Center и элемент Flex будут идеально центрированы:

Пример

Дочерние элементы (элементы)

Прямые дочерние элементы контейнера Flex автоматически становятся гибкими (Flex) элементами.

Вышеприведенный элемент представляет собой четыре синих элемента Flex внутри серого контейнера Flex.

Пример

Свойства элемента Flex:

Свойство Order

Свойство order указывает порядок элементов Flex.

Первый элемент Flex в коде не должен отображаться в качестве первого элемента макета.

Значение Order должно быть числом, значением по умолчанию является 0.

Пример

Свойство Order может изменить порядок элементов Flex:

Flex-расти собственности

Свойство flex-grow указывает, сколько гибкого элемента будет увеличиваться относительно остальных элементов Flex.

Значение должно быть числом, значением по умолчанию является 0.

Пример

Сделать третий гибкий элемент расти в восемь раз быстрее, чем другие элементы Flex:


Свойство Flex-сжатие

Свойство flex-shrink указывает, сколько гибкого элемента будет сжиматься относительно остальных элементов Flex.

Значение должно быть числом, значением по умолчанию является 1.

Пример

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

Свойство Flex-базиса

Свойство flex-basis указывает начальную длину элемента Flex.

Пример

Set the initial length of the third flex item to 200 pixels:

Свойство Flex

Свойство flex является сокращенным свойством для свойств flex-grow , flex-shrink и flex-basis .

Пример

Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:

Свойство «выравнивание-само»

Свойство align-self задает выравнивание для выбранного элемента внутри гибкого контейнера.

Свойство align-self переопределяет выравнивание по умолчанию, заданное свойством align-items контейнера.

В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать свойство align-self :

Пример

Совместите третий элемент Flex в середине контейнера:

Пример

Совместите второй элемент Flex в верхней части контейнера и третий элемент Flex в нижней части контейнера:

Адаптивная Галерея изображений с помощью Flexbox

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

Отзывчивый сайт с помощью Flexbox

Используйте Flexbox для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент:

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

Свойства Flexbox поддерживаются во всех современных браузерах.

29.0 11.0 22.0 10 48

Свойства Flexbox CSS

В следующей таблице перечислены свойства CSS, используемые с Flexbox:

Flexbox в CSS

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

Если говорить коротко, то верстка с Flexbox дает нам простые решения некогда непростых задач. Например, когда нужно выровнять элемент по вертикали, или прижать подвал к низу экрана, или просто вставить несколько блоков в один ряд, так чтобы они занимали все свободно пространство. Подобные задачи решаются и без flex. Но как правило, эти решения больше похожи на «костыли» — приемы использовать css не по назначению. Тогда как с flexbox такие задачи решаются именно так, как задумывает flex-модель.

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

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

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

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

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

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

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

  • Размер (главный и поперечный) — базовая величина по которой высчитывается ширина или высота внутренних элементов, если размер указан не точно (указан в процентах или не указан вообще, а элемент должен растянуться или сжаться).
  • Для включения flexbox, любому HTML элементу достаточно присвоить css свойство display:flex; или display:inline-flex; .

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

    Главную и кросс оси можно поменять местами, тогда элементы будут располагаться сверху вниз (↓) и когда перестанут вмещаться в высоту то будут двигаться слева направо (→) — то есть оси просто поменялись местами. При этом начало и конец расположения элементов не меняется — меняются только направления (оси)! Именно поэтому нужно представлять себе оси внутри контейнера. Однако не нужно думать, что есть какие-то там «физические» оси и они на что-то влияют. Ось тут — это только лишь направление движения элементов внутри контейнера. Например, если мы указали выравнивание элементов по центру основной оси и потом изменили направление этой основной оси, то изменится и выравнивание: элементы были в середине по горизонтали, а стали в середине по вертикали. См. пример.

    Еще одной важной особенностью Флекс-бокс является наличие рядов в поперечном направлении. Чтобы понять о чем речь, давайте представим что есть главная горизонтальная ось, много элементов и они не «лезут» в контейнер, поэтому переходят на другой ряд. Т.е. контейнер выглядит так: контейнер, внутри него два ряда, в каждом ряду по несколько элементов. Представили? А теперь запомните, что выравнивать по вертикали мы можем не только элементы, но и ряды! Как это работает хорошо видно в примере к свойству align-content. А вот так это выглядит схематически:

    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-flow: direction 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 только для противоположной оси.

    Заметка: Работает когда есть как минимум 2 ряда, т.е. при наличии только 1 ряда ничего не произойдет.

    Т.е. если 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 — элементы выравниваются по базовой линии текста

    меню

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

    Задает коэффициент увеличения элемента при наличии свободного места в контейнере. По умолчанию 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-basis будет «жестким», если обнулить растяжение и сжатие: flex-basis:200px; flex-grow:0; flex-shrink:0; . Все это можно записать так flex:0 0 200px; .

    Короткая запись трех свойств: 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 3 значения (flex-grow/flex-shrink/flex-basis) можно скомбинировать и записать коротко, а для width grow или shrink нужно писать отдельно. Например: flex:0 0 50% == width:50%; flex-shrink:0; . Иногда это просто неудобно.
  • Илон Маск рекомендует:  Сохранение в переменной выделенного на странице текста

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

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

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

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

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

    #1 Простой пример с выравниванием по вертикали и горизонтали

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

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

    #1.2 Разделение (разрыв) между элементами флекс блока

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

    #2 Адаптивное меню на flex

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

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #3 Адаптивные 3 колонки

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

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

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #4 Адаптивные блоки на flex

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

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #5 Галерея на flex и transition

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

    #6 Флекс во флекс (просто пример)

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

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

    Еще примеры

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

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

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

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

    Chrome Safari Firefox Opera IE Android iOS
    20- (old) 3.1+ (old) 2-21 (old) 10 (tweener) 2.1+ (old) 3.2+ (old)
    21+ (new) 6.1+ (new) 22+ (new) 12.1+ (new) 11+ (new) 4.4+ (new) 7.1+ (new)
    • (new) — новый синтаксис: display: flex; .
    • (tweener) — старый неофициальный синтаксис 2011 года: display: flexbox; .
    • (old) — старый синтаксис 2009 года: display: box;

    меню

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

    Полезные ссылки по Flex

    Flexplorer — наглядный конструктор flex кода.

    Flexbox

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

    Необходимые навыки: HTML основы (изучите Введение в HTML), знание того, как работает CSS (изучите Вступление в CSS).
    Цель: Узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов.

    Почему Flexbox?

    Долгое время единственными надёжными инструментами CSS верстки были такие способы как Float (обтекание) и позиционирование .

    С их помощью сложно или невозможно достичь следующих простых требований к макету :

    • Вертикального выравнивания блока внутри родителя.
    • Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.
    • Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.

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

    Разберём простой пример

    В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — flexbox0.html с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете посмотреть его вживую.

    Определяем, какие элементы разместить в виде flex блоков

    В результате у нас получится вот так:

    Так, всего одно объявление делает всё, что нам нужно — здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте. Это связано с тем, что значения по умолчанию, заданные для flex элементов (дочерние элементы flex контейнера), настроены для решения основных задач. Подробнее об этом позже.

    Примечание: Вы также можете установить значение display inline-flex, если хотите расставить inline элементы как flex блоки.

    Внутри flex модели

    Когда элементы выложены как flex блоки, они располагаются вдоль двух осей:

    • Главная ось (main axis) проходит в том направлении, вдоль которого расположены Flex элементы (например, в строку слева направо или вдоль колонок вниз.) Начало и конец этой оси называются main start и main end.
    • Поперечная ось (сross axis) проходит перпендикулярно Flex элементам. Начало и конец этой оси называются cross start and cross end.
    • Родительский элемент, на который назначено свойство display: flex ( представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа.»> в нашем примере) называется flex container.
    • Элементы, размещённые в нём как Flex блоки называются flex items (в нашем примере это представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования.»> ).

    Запомните эти термины, они пригодятся вам в последующих разделах.

    Столбцы или строки?

    В Flexbox есть свойство под названием flex-direction , которое определяет направление главной оси (в каком направлении располагаются flexbox дети) — по умолчанию ему присваивается значение row , т.е. располагать дочерние элементы в ряд слева направо (для большинства языков) или справа налево (для арабских языков).

    Попробуйте добавить следующую строчку в ваш файл:

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

    Примечание: Вы можете также распологать flex элементы в обратном направлении, используя значения row-reverse и column-reverse . Попробуйте их тоже!

    Перенос строк

    Проблема может быть в том, что, если у вас фиксированная ширина или высота макета, ваши flexbox элементы переполнят контейнер и нарушат макет. Посмотрите на этот пример: flexbox-wrap0.html и посмотрите его вживую (сохраните его себе на комьютер, если хотите изучить этот пример):

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

    Попробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:

    Теперь у нас в макете несколько рядов— все дети-блоки, которые не помещаются, переносятся на следующую строку, чтобы не было переполнения. Свойство flex: 200px , установленное на статьях, означает, что каждый блок должен быть минимум 200 пикселей в ширину. Мы обсудим это свойство более подробно позже. Вы также можете заметить, что несколько дочерних блоков в последней строке стали более широкими, так что вся строка стала заполнена.

    Но мы можем пойти дальше. Прежде всего, попробуйте изменить значение свойства flex-direction на row-reverse — теперь у вас также макет в несколько строк, но он начинается из противоположного угла окна браузера и теперь выстраивается в обратном порядке.

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

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

    Гибкое изменение размеров flex элементов

    Теперь давайте вернёмся к нашему первому примеру и посмотрим, как мы можем контролировать, в каких пропорциях flex элементы будут занимать место. Включите свою копию файла flexbox0.html, или скачайте flexbox1.html (просмотр).

    Прежде всего, добавим следующее правило в конец вашего CSS кода:

    Теперь добавьте следующее правило в строку после предыдущего:

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


    Это просто означает, что каждому flex элементу сначала будет дано 200px от свободного места. Потом оставшееся место будет поделено в соответствии с частями пропорций. Обновите страницу, и вы увидите разницу, как пространство поделено теперь.

    flex: краткий код против развёрнутого

    flex это сокращённое свойство, в которым можно задать до трёх разных свойств:

    • Значение пропорции, которое мы обсуждали выше. Оно может быть установлено отдельно с помощью свойства flex-grow .
    • Следующее значение пропорции — flex-shrink — вступает в роль, когда flex элементы переполняют контейнер. Оно указывает, сколько забирается от размера каждого flex элемента, чтобы он перестал переполнять контейнер. Это продвинутая функция flexbox, и в этом параграфе мы не будем её разбирать.
    • Значение минимального размера, как мы обсуждали ранее. Оно может быть установлено отдельно с помощью свойства flex-basis .

    Мы не советуем использовать развёрнутые свойства flex, если вам в действительности это не нужно (например, переопределить ранее установленное). Они приводят к написанию большого количества дополнительного кода и могут запутать кого угодно.

    Горизонтальное и вертикальное выравнивание

    Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — flex-align0.html (просмотр) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу.

    Сначала сделайте себе копию этого примера.

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

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

    align-items контролирует, где на поперечной оси находятся flex элементы.

    • По умолчанию стоит значение stretch , которое растягивает все flex элементы, чтобы заполнить родителя вдоль поперечной (cross axis) оси. Если у родителя нет фиксированной ширины вдоль поперечной оси, все flex элементы примут длину самого длинного flex элемента. Вот почему наш первый пример по умолчанию получил столбцы с одинаковой высотой.
    • Значение center , которое мы использовали в коде вверху, заставляет элементы сохранять свои собственные размеры, но центрирует их вдоль поперечной оси. Вот почему кнопки текущего примера центрированы по вертикали.
    • Также есть значения flex-start и flex-end , которые выравнивают все элементы по началу и концу поперечной оси соответственно. См. подробнее align-items .

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

    Посмотрите, что произошло и удалите эти строки.

    justify-content контролирует, где flex элементы располагаются на главной оси.

    • По умолчанию стоит значение flex-start , которое располагает все элементы в начале главной оси.
    • Также можно использовать flex-end, чтобы расположить их в конце.
    • center — также одно из значений justify-content , располагает все элементы по центру главной оси.
    • Значение, которое мы использовали выше, space-around , весьма полезно — оно распределяет все элементы равномерно по главной оси, с небольшим количеством свободного места на обоих концах.
    • И ещё одно значение, space-between , которое очень похоже на space-around, за исключением того, что оно не оставляет места на обоих концах.

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

    Порядок элементов flex

    В Flexbox также есть возможность менять порядок расположения flex элементов, не влияя на исходный порядок. Это ещё одна вещь, которую невозможно сделать традиционными методами CSS.

    Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:

    и теперь вы увидите, что кнопка «Smile» переместилась в конец главной оси. Давайте теперь поговорим подробнее о том, как это работает:

    • По умолчанию все элементы flex имеют значение order равное 0.
    • Элементы Flex с установленными на них бОльшими значениями будут отображаться позже в порядке отображения, чем элементы с меньшими значениями порядка.
    • Элементы Flex с одинаковым значением порядка будут отображаться в исходном порядке. Так, если у вас есть четыре элемента с порядковыми значениями 2, 1, 1 и 0, установленными на них соответственно, их порядок отображения будет 4-й, 2-й, 3-й, затем 1-й.
    • Третий элемент появляется после второго, потому что он имеет то же значение порядка и находится после него в порядке написания.

    Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:

    Вложенные flex блоки

    Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать flex элемент flex контейнером, чтобы его потомки также были flex блоками. Посмотрите на complex-flexbox.html (см. вживую).

    Давайте посмотрим на код, который мы использовали для макета.

    Наконец, мы устанавливаем размер кнопке, мы даем ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.

    Совместимость с браузерами

    Поддержка Flexbox доступна в большинстве новых браузеров: Firefox, Chrome, Opera, Microsoft Edge и IE 11, более поздних версиях Android / iOS и т. д.. Однако помните, что до сих пор используются более старые браузеры, которые не поддерживают Flexbox ( или поддерживают, но старую версию.)

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

    Flexbox немного сложнее, чем некоторые функции CSS. Например, если в браузере отсутствует поддержка CSS тени, сайт по-прежнему будет можно использовать. А вот неподдерживаемые функции flexbox, возможно, полностью сломают макет, что сделает сайт непригодным.

    Мы обсудим возможности преодоления проблем поддержки кросс-браузерности в следующем модуле.

    Подытожим

    Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим еще один важный аспект макетов CSS — grid-системы.

    Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

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

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

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

    Display: Flex

    Вот пример страницы:

    У нас есть 4 разноцветных div’а разных размеров, которые находятся внутри серого div’а. У каждого div’а есть свойство display: block . Поэтому каждый квадрат занимает всю ширину строки.

    Чтобы начать работать с Flexbox, нам нужно сделать наш контейнер flex-контейнером. Делается это так:

    Вроде бы ничего особо и не изменилось — div’ы всего лишь встали в ряд. Но вы сделали что-то действительно мощное. Вы дали вашим квадратам классное свойство, называемое “flex-контекст”.

    Flex Direction

    У flex-контейнера есть две оси: главная ось и перпендикулярная ей.

    По умолчанию все предметы располагаются вдоль главной оси: слева направо. Поэтому наши квадраты выровнялись в линию, когда мы применили display: flex . Однако flex-direction позволяет вращать главную ось.

    Важно заметить, что flex-direction: column не выравнивает квадраты по оси, перпендикулярной главной. Главная ось сама меняет свое расположение и теперь направлена сверху вниз.

    «КРОК», Москва, Троицк, Санкт-Петербург, Нижний Новгород, Самара, Иркутск, Пермь, Краснодар, Воронеж, Челябинск, от 120 000 до 240 000 ₽

    Есть еще парочка свойств для flex-direction: row-reverse и column-reverse .

    Justify Content

    Justify-content отвечает за выравнивание элементов по главной оси.

    Вернемся к flex-direction: row .

    Justify-content может принимать 5 значений:

    Space-between задает одинаковое расстояние между квадратами, но не между контейнером и квадратами. Space-around также задает одинаковое расстояние между квадратами, но теперь расстояние между контейнером и квадратами равно половине расстояния между квадратами.

    Align Items

    Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси.

    Вернемся обратно к flex-direction: row и пройдемся по командам align-items :

    Стоит заметить, что для align-items: stretch высота квадратов должна быть равна auto . Для align-items: baseline теги параграфа убирать не нужно, иначе получится вот так:

    Чтобы получше разобраться в том, как работают оси, давайте объединим justify-content с align-items и посмотрим, как работает выравнивание по центру для двух свойств flex-direction :

    Align Self

    Align-self позволяет выравнивать элементы по отдельности.

    Давайте для двух квадратов применим align-self , а для остальных применим align-items: center и flex-direction: row .

    Flex-Basis

    Flex-basis отвечает за изначальный размер элементов до того, как они будут изменены другими свойствами Flexbox:

    Flex-basis влияет на размер элементов вдоль главной оси.

    Давайте посмотрим, что случится, если мы изменим направление главной оси:

    Заметьте, что нам пришлось изменить и высоту элементов. Flex-basis может определять как высоту элементов, так и их ширину в зависимости от направления оси.

    Flex Grow

    Это свойство немного сложнее.

    Для начала давайте зададим нашим квадратикам одинаковую ширину в 120px:

    По умолчанию значение flex-grow равно 0. Это значит, что квадратам запрещено расти (занимать оставшееся место в контейнере).

    Попробуем задать flex-grow равным 1 для каждого квадрата:

    Квадраты заняли оставшееся место в контейнере. Значение flex-grow аннулирует значение ширины.

    Но здесь возникает один вопрос: что значит flex-grow: 1 ?

    Попробуем задать flex-grow равным 999:

    И… ничего не произошло. Так получилось из-за того, что flex-grow принимает не абсолютные значения, а относительные.

    Это значит, что не важно, какое значение у flex-grow , важно, какое оно по отношению к другим квадратам:

    Вначале flex-grow каждого квадрата равен 1, в сумме получится 6. Значит, наш контейнер поделен на 6 частей. Каждый квадрат будет занимать 1/6 часть доступного пространства в контейнере.

    Когда flex-grow третьего квадрата становится равным 2, контейнер делится на 7 частей (1 + 1 + 2 + 1 + 1 + 1).

    Теперь третий квадрат занимает 2/7 пространства, остальные — по 1/7.

    Стоит помнить, что flex-grow работает только для главной оси (пока мы не поменяем ее направление).

    Flex Shrink

    Flex-shrink — прямая противоположность flex-grow . Оно определяет, насколько квадрату можно уменьшиться в размере.

    Flex-shrink используется, когда элементы не вмещаются в контейнер.

    Вы определяете, какие элементы должны уменьшиться в размерах, а какие — нет. По умолчанию значение flex-shrink для каждого квадрата равно 1. Это значит, что квадраты будут сжиматься, когда контейнер будет уменьшаться.

    Зададим flex-grow и flex-shrink равными 1:

    Теперь давайте поменяем значение flex-shrink для третьего квадрата на 0. Ему запретили сжиматься, поэтому его ширина останется равной 120px:

    Стоит помнить что flex-shrink основывается на пропорциях. То есть, если у квадрата flex-shrink равен 6, а у остальных он равен 2, то, это значит, что наш квадрат будет сжиматься в три раза быстрее, чем остальные.

    Flex заменяет flex-grow , flex-shrink и flex-basis .

    Значения по умолчанию: 0 (grow) 1 (shrink) и auto (basis) .

    Создадим два квадрата:

    У обоих квадратов одинаковый flex-basis . Это значит, что они оба будут шириной в 300px (ширина контейнера: 600px плюс margin и padding).

    Но когда контейнер начнет увеличиваться в размерах, первый квадрат (с большим flex-grow ) будет увеличиваться в два раза быстрее, а второй квадрат (с наибольшим flex-shrink ) будет сжиматься в два раза быстрее.


    Как вещи растут и сжимаются

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

    Немного математики

    Начальный размер контейнера: 640px. Вычтем по 20px с каждой стороны для padding, и у нас останется 600px, как раз для двух квадратов.

    Когда ширина контейнера становится равной 430px (потеря в 210px), первый квадрат ( flex-shrink: 1 ) теряет 70px. Второй квадрат ( flex-shrink: 2 ) теряет 140px.

    Когда контейнер сжимается до 340px, мы теряем 300px. Первый квадрат теряет 100px, второй — 200px.

    Полное руководство по Flexbox выравниванию

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

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

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

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

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

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

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

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

    1. flex-direction: row; – основная ось идет слева направо (это значение по умолчанию)
    2. flex-direction: row-reverse; – основная ось идет справа налево
    3. flex-direction: column; – основная ось идет сверху вниз
    4. 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 может принимать пять значений:

    1. flex-start — flex элементы расположены вначале основной оси (это значение по умолчанию)
    2. flex-end — flex элементы расположены в конце основной оси
    3. center — flex элементы расположены в центре основной оси
    4. space-between — flex элементы распределены равномерно вдоль основной оси, от flex-start до flex-end
    5. 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 элементов.

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

    1. auto — заставляет свойство align-self наследовать значение align-items (по умолчанию для align-self)
    2. flex-start — flex элементы выровнены от начала поперечной оси
    3. flex-end — flex элементы выровнены от конца поперечной оси
    4. center — flex элементы выровнены по центру поперечной оси
    5. baseline — flex элементы выровнены от их базовой линии вверх
    6. 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 (например, когда содержимое не переносится). Оно может принимать шесть различных значений:

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

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

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

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

    Заключение

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

    • Официальная документация W3C по flexbox выравниванию Тяжелое, но полезное чтиво; также документация по flexbox.
    • Как выровнять элементы в контейнере Flex. Страница документов MDN с интерактивными демонстрационными примерами и примерами кода.
    • Памятка по Flexbox от Joni Trythall. Хорошая PDF-шпаргалка для загрузки, с виноградом, грушами и апельсинами.
    • Flexbox Froggy Онлайн-игра для изучения flexbox, с лягушками и лилиями. Если вы хотите подбирать flexbox выравнивание интуитивно, попробуйте эту игру (вы можете попробовать все, что мы рассмотрели в этом уроке).

    Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки.

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

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

    Случилось так потому, что html и css развивались эволюционно. В начале веб-страницы были похожи на однопоточные текстовые документы, чуть позже разбиение страницы на блоки делали таблицами, затем стало модным верстать float-ами, а после официальной смерти ie6 добавились еще и приемы с inline-block. В итоге мы получили в наследство гремучую смесь всех этих приемов, используемую для построения лейаутов 99,9% всех существующих веб-страниц.

    Спецификация CSS Flexible Box Layout Module (в народе Flexbox) призвана кардинально изменить ситуацию в лучшую сторону при решении огромного количества задач. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

    Основные преимущества flexbox

    1. Все блоки очень легко делаются “резиновым”, что уже следует из названия “flex”. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
    2. Выравнивание по вертикали и горизонтали, базовой линии текста работает шикарно.
    3. Расположение элементов в html не имеет решающего значения. Его можно поменять в CSS. Это особенно важно для некоторых аспектов responsive верстки.
    4. Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место.
    5. Множество языков в мире используют написание справа налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right). Flexbox адаптирован для этого. В нем есть понятие начала и конца, а не права и лева. Т.е. в браузерах с локалью rtl все элементы будут автоматически расположены в реверсном порядке.
    6. Синтаксис CSS правил очень прост и осваивается довольно быстро.

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

    Поддержка браузерами пока неполная (2014). Виноват в этом в основном Internet explorer, который поддерживает спецификацию 2011 года только начиная с 10 версии, . Не смотря на это, я бы порекомендовал обратить внимание на обширность поддержки всеми остальными мобильными и десктопными браузерами! Тут все прекрасно. Если Вам нужна мобильная версия сайта или web-based приложение, то его уже можно (а, возможно, и нужно) делать, используя все преимущества flexbox!

    Немного истории

    • 2008 – CSS Working Group обсуждает предложение “Flexible Box Model” на основе XUL (XML User Interface Language – язык разметки в приложениях Mozilla) and XAML (Extensible Application Markup Language – язык разметки в приложениях Microsoft).
    • 2009 – опубликован черновик “Flexible Box Layout Module”. Chrome и Safari добавляет частичную поддержку, пока Mozilla начинает поддерживать XUL-подобный синтаксис, известный как “Flexbox 2009”.
    • 2011 – Tab Atkins берется за развитие Flexbox и публикует 2 черновика. В этих черновиках синтаксис изменен значительно. Chrome, Opera и IE 10 внедряют поддержку этого синтаксиса. Он известен под названием “flexbox 2011”
    • 2012 – Синтаксис снова немного изменен и уточнен. Спецификация переходит в статус Candidate Recommendation и известна под названием “flexbox 2012”. Opera внедряет беспрефиксную поддержку, Chrome поддерживает текущую спецификацию с префиксами, а Mozilla без них, IE10 добавляет поддержку устаревающего “flexbox 2011” синтаксиса.
    • 2014 – все новые браузеры поддерживают последнюю спецификацию (включая IE 11)

    Мы будем рассматривать все примеры на основе новой спецификации. Если вам нужна поддержка старых Сhrome, FF и IE10, лучше использовать autoprefixer от Андрея Ситника, который автоматически добавит css правила и вендорные префиксы для устаревших спецификаций.

    Начинаем погружение

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

    Основные свойства flex-контейнера. Главная и поперечная ось.

    Одним из основных понятий в fleхbox являются оси.

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

    Главная ось в ltr локали по умолчанию располагается слева направо. Поперечная – сверху вниз. Направление главной оси flex-контейнера можно задавать, используя базовое css свойство flex-direction .


    flex-direction – направление главной оси

    Доступные значения flex-direction:

    • row (значение по умолчанию) : слева направо (в rtl справа налево)
    • row-reverse : справа налево (в rtl слева направо)
    • column : сверху вниз
    • column-reverse : снизу вверх

    justify-content – выравнивание по главной оси.

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

    Доступные значения justify-content:

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

    align-items – выравнивание по поперечной оси.

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

    Доступные значения align-items:

    • flex-start : блоки прижаты к началу поперечной оси
    • flex-end : блоки прижаты к концу поперечной оси
    • center : блоки располагаются в центре поперечной оси
    • baseline : блоки выровнены по их baseline
    • stretch (значение по умолчанию) : блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width / max-width , если таковые заданы.

    СSS свойства flex-direction , justify-content , align-items должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

    Демо основных свойств flex-контейнера

    Оси и выравнивания по ним – это основы flex. Расслабьтесь, покликайте по демке и используйте ее, если нужно будет освежить в памяти.

    Многострочная организация блоков внутри flex-контейнера.

    flex-wrap

    Все примеры, которые мы приводили выше, были построены с учетом однострочного (одностолбцового) расположения блоков. Надо сказать, что по умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, спецификацией также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap .

    Доступные значения flex-wrap:

    • nowrap (значение по умолчанию) : блоки расположены в одну линию слева направо (в rtl справа налево)
    • wrap : блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они следуют друг за другом слева направо (в rtl справа налево)
    • wrap-reverse : то-же что и wrap, но блоки располагаются в обратном порядке.

    flex-flow – удобное сокращение для flex-direction + flex-wrap

    По сути, flex-flow предоставляет возможность в одном свойстве описать направление главной и многострочность поперечной оси. По умолчанию flex-flow: row nowrap .

    align-content

    Существует также свойство align-content , которое определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера.

    Важно: align-content работает только в многострочном режиме (т.е. в случае flex-wrap:wrap; или flex-wrap:wrap-reverse; )

    Доступные значения align-content:

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

    СSS свойства flex-wrap и align-content должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

    Демо свойств многострочности в flex

    CSS правила для дочерних элементов flex-контейнера (flex-блоков)

    flex-basis – базовый размер отдельно взятого flex-блока

    Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. Может быть задан в любых единицах измерения длинны ( px , em , % , …) или auto (по умолчанию). Если задан как auto – за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.

    flex-grow – “жадность” отдельно взятого flex-блока

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

    Пример 1:

    • Если все flex-блоки внутри flex-контейнера имеют flex-grow:1 , то они будут одинакового размера
    • Если один из них имеет flex-grow:2 , то он будет в 2 раза больше, чем все остальные

    Пример 2:

    • Если все flex-блоки внутри flex-контейнера имеют flex-grow:3 , то они будут одинакового размера
    • Если один из них имеет flex-grow:12 , то он будет в 4 раза больше, чем все остальные

    Т.е абсолютное значение flex-grow не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.

    flex-shrink – фактор “сжимаемости” отдельно взятого flex-блока

    Определяет, насколько flex-блок будет уменьшаться относительно соседних эдементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен 1 .

    flex – короткая запись для свойств flex-grow, flex-shrink и flex-basis

    Демо для flex-grow, flex-shrink и flex-basis

    align-self – выравнивание отдельно взятого flex-блока по поперечной оси.

    Делает возможным переопределять свойство flex-контейнера align-items для отдельного flex-блока.

    Доступные значения align-self (те же 5 вариантов, что и для align-items )

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

    order – порядок следования отдельно взятого flex-блока внутри flex-контейнера.

    По умолчанию все блоки будут следовать друг за другом в порядке, заданном в html. Однако этот порядок можно изменить с помощью свойства order . Оно задается целым числом и по умолчанию равно 0 .

    Значение order не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.

    В данном случае, блоки будут следовать один за другим вдоль главной оси в следующем порядке: item5, item1, item3, item4, item2

    Демо для align-self и order

    margin: auto по вертикали. Мечты сбываются!

    Flexbox можно любить хотя бы за то, что привычное всем выравнивание по горизонтали через margin:auto здесь работает и для вертикали!

    Вещи, которые следует помнить

    1. Не следует использовать flexbox там, где в этом нет необходимости.
    2. Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.
    3. Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.
    4. Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям. Также важно помнить, что margin-ы в flexbox не “коллапсятся”, как это происходит в обычном потоке.
    5. Значение float у flex-блоков не учитывается и не имеет значения. Это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.
    6. flexbox очень хорошо подходит для верстки веб-компонентов и отдельных частей веб-страниц, но показал себя не с лучшей стороны при верстке базовых макетов (расположение article, header, footer, navbar и т.п.). Это все еще спорный момент, но эта статья довольно убедительно показывает недостатки xanthir.com/blog/b4580

    В заключение

    Я думаю, что flexbox, конечно же, не вытеснит все остальные способы верстки, но, безусловно, в ближайшее время займет достойную нишу при решении огромного количества задач. И уж точно, пробовать работать с ним нужно уже сейчас. Одна из следующих статей будет посвящена конкретным примерам работы с flex-версткой. Подписывайтесь на новости ;)

    Вёрстка на Flexbox в CSS. Полный справочник

    update 25.07.19 Долго и постепенно, на протяжении года находил и переводил статьи по больным темам при работе с CSS Flexbox и решил обновить статью, исправив и дополнив некоторые моменты, добавив подробные разъяснения на каждый момент. К тому же добавил подробные объяснения некоторых методик при использовании Flexbox

    В этой статье вы узнаете буквально все свойства модуля Flexbox и даже больше — вы сможете посмотреть на примерах, как высчитываются и работают самые сложные из них, конечно же, параллельно увидев полное объяснение каждого. Эта статья является переводом самой последней версии статьи — A Complete Guide to Flexbox. В интернете конечно есть другие переводы, но они либо для старых версий, либо в некоторых моментах, с неправильным переводом, а есть и частичные переводы, вырванные из контекста всего руководства.

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

    Введение

    Flexbox разметка в CSS даёт один из наиболее эффективных способов расстановки, выравнивания и распределения места между элементами внутри контейнера, даже если их размер неизвестен или динамичен (собственно, по этому его и называют flex, от слова flexible, что по-английски имеет двойственное значение — гибкий и уступчивый, что очень сочетается с моделью поведения flexbox).

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

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

    Учтите, что Flexbox лучше всего подходит для компонентов в приложении и для не масштабных шаблонов. Существует Grid модель разметки, которая предназначена для работы с большими шаблонами и комплексными приложениями. Именно этот момент очень хорошо и доступно расписан в статьях — Решающая CSS битва: Grid против Flexbox и Когда нужно использовать Flexbox

    Полное руководство по свойствам размеров Flexbox

    Дата публикации: 2020-02-18

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

    В этом руководстве я покажу вам, как использовать свойства Flexbox для изменения размеров: flex-grow, flex-shrink, flex-basis и flex.

    Заполнение свободного пространства

    Одним из наиболее сложных аспектов написания CSS является выяснение того, как распределить свободное пространство, которое остается на экране после заполнения страницы контентом. При некоторых размерах окна просмотра вы обнаружите, что места осталось слишком много, и вы хотите заполнить его чем-нибудь. При других размерах окна просмотра вы можете обнаружить, что места недостаточно, и макет так или иначе нарушается.

    Свойства размеров Flexbox позволяют принимать решения в трех видах сценариев:

    flex-grow: как должны вести себя flex-элементы при избытке свободного пространства (как они должны растягиваться).

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    flex-shrink: как должны вести себя гибкие элементы при нехватке свободного места (как они должны сжиматься).

    flex-basis: как должны вести себя гибкие элементы, когда места ровно столько, сколько нужно.
    Поскольку flexbox является одномерным макетом, в отличие от CSS Grid, который является двумерным, вы можете выделить свободное пространство вдоль главной оси (будь то сверху вниз, снизу вверх, слева направо или справа налево) , Вы можете установить направление главной оси, используя свойство flex-direction.

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

    1. Положительное свободное пространство: flex-grow

    Свойство flex-grow определяет , как должно распределяться дополнительное пространство в промежутке между элементами. Самая важная вещь, которую следует помнить о размерах flexbox, это то, что flex-grow разделяет не весь flex-контейнер, а только пространство, которое остается после того, как браузер отобразит все flex-элементы. Если свободного места нет, flex-grow не дает никакого эффекта.

    Верстка по Flexbox (работа с контейнерами).


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

    В cтатье «Плавающие элементы в CSS» мы с вами научились строить макеты страниц на основе плавающих элементов, они до настоящего времени актуальны и наиболее распространены, так как в совокупности с позиционированием позволяют выполнить любую задачу связанную с версткой страниц. Информационные технологии и front-end разработка в частности, это не то место, где Вы будете сидеть в уютной пещере, иногда приходится из неё выбираться и осваивать новую.

    Пока для нас готовят новую комфортабельную Grid пещеру, мы с Вами подготовимся к её освоению в будущем и переходим к изучению самой актуальной, и современной в настоящее время модели построения макетов страниц — Flexbox.

    Что такое Flexbox?

    Flexbox (сокращение от flexible box — «гибкий / резиновый блок») — это современный нативный метод верстки страниц сайта с помощью каскадных таблиц стилей. Flexbox был введен в составе отдельного модуля — CSS Flexible Box Layout Module , этот модуль (спецификация) описывает модель CSS, оптимизированную для дизайна пользовательского интерфейса и позволяет быстро решать такие важные задачи при построении макета как:

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

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

    Chrome Firefox Opera Safari IExplorer Edge
    29.0
    21.0
    -webkit-
    28.0
    18.0
    -moz-
    17.0 9.0
    6.1
    -webkit-
    11.0
    10.0
    -ms-
    12.0

    Как начать верстать по Flexbox?

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

    Обратите внимание на важный момент, что все дочерние элементы флекс контейнера становятся флекс элементами, а не все вложенные потомки, то есть элементы, вложенные уже в дочерние элементы не будут являться флекс элементами по умолчанию:

    У вас может возникнуть логичный вопрос, а что требуется для того, чтобы сделать флекс контейнер? Для этого достаточно установить свойство display элемента в значение flex , или inline-flex :

    Перейдем к рассмотрению наглядного примера:

    В этом примере мы установили для элемента значение свойство display элемента в значение flex , а это означает, что он стал блочным флекс контейнером, а все вложенные в него дочерние элементы

    У многих редакторов кода по умолчанию встроен, или доступен для скачивания удобный плагин для быстрой разметки Emmet, он позволяет сделать основную разметку этого примера следующим образом: section>div*3>lorem + Tab (значение lorem генерирует текст, который имеется на изображении ниже).

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

    Результат нашего примера:

    Рис. 204 Пример размещения флекс контейнера.

    Строчный флекс контейнер

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

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

    В этом примере мы разместили два строчных и два блочных флекс контейнера, внутри них мы разместили по пять элементов

    Чтобы быстро сгенерировать подобную верстку с помощью Emmet наберите в редакторе следующее: div.inline-flex*2>div*5 + Tab , и тоже самое только с другим классом div.flex*2>div*5 + Tab .

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

    Результат нашего примера:

    Рис. 205 Пример отличия inline-flex контейнеров от flex контейнеров.

    Направление? Какое направление?

    Направление флекс элементов формируется исходя из положения двух осей: главной оси флекс контейнера и его поперечной оси, которая всегда распологается перпендикулярно главной. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr ) располагается слева направо, а поперечная – сверху вниз (это значение по умолчанию), для значения rtl отображается зеркально соответственно.

    CSS свойство flex-direction позволяет указать направление, в соответствии с которым располагаются флекс элементы внутри флекс контейнера.

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

    Схематичное отображение работы свойства flex-direction отображено на следующем изображении (при направлении ltr ):

    Рис. 206 Схематичное отображение работы свойства flex-direction

    Перейдем к рассмотрению примера:

    В этом примере мы разместили четыре блочных флекс контейнера, внутри которых мы разместили по три элемента

    • Первый блок имеет значение row , в котором флекс элементы отображаются горизонтально, в виде строки. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr ) располагается слева направо, а при значения rtl отображается справо налево. Это значение по умолчанию.
    • Второй блок имеет значение row-reverse , в котором флекс элементы отображаются горизонтально, в виде строки по аналогии со значением row , но формирование строки идёт в обратном направлении. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr ) располагается справо налево, а при значения rtl отображается слева направо.
    • Третий блок имеет значение column , в котором флекс элементы отображаются вертикально как колонны. Формирование колонны осуществляется сверху вниз.
    • Четвертый блок имеет значение column-reverse , в котором флекс элементы отображаются вертикально как колонны по аналогии со значением column , но формирование колонны идёт в обратном направлении (снизу вверх).

    Для экономии пространства я скомпоновал результат примера отдельно по каждому контейнеру на следующем изображении:

    Рис. 207 Пример указания направления для флекс элементов.

    Однострочные и многострочные контейнеры

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

    Схематичное отображение работы свойства flex-wrap отображено на следующем изображении:

    Рис. 208 Схематичное отображение работы свойства flex-wrap

    Перейдем к рассмотрению примера:

    В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента

    Первый контейнер имеет значение nowrap свойства flex-wrap , это значение по умолчанию и указано в таблице стилей лишь для наглядности. Обратите внимание не смотря на то, что значение ширины всех флекс элементов должно переполнять родительский контейнер, флекс элементы подстраиваются под имеющиеся размеры контейнера и не перемещаются на новую строку, так как наш контейнер является однострочным. Даже, если бы мы указали для элементов значение ширины равное 100% от родительского элемента, то это не повлияло бы на отображение в этом однострочном контейнере.

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

    Флекс элементы размещаются слева направо при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr ), а при значении rtl размещаются справа налево.

    Третий контейнер имеет значение nowrap свойства flex-wrap , это значение указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения) по аналогии со значением wrap , но формирование строк идёт в обратном порядке.

    Результат нашего примера:

    Рис. 209 Пример однострочных и многострочных флекс контейнеров.

    Универсальное свойство flex-flow

    Универсальное свойство flex-flow позволяет в одном объявлении указать значения ранее рассмотренных свойств flex-direction (задает направление, в соответствии с которым располагаются флекс элементы внутри флекс контейнера), и flex-wrap (определяет, будет ли флекс контейнер однострочным, или многострочным).

    Это свойство имеет следующий синтаксис:

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

    В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента

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

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

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

    Результат нашего примера:

    Рис. 210 Пример однострочных и многострочных флекс контейнеров.

    Горизонтальное выравнивание

    CSS свойство justify-content определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси флекс контейнера (горизонтально).

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

    Схематичное отображение работы свойства justify-content отображено на следующем изображении:

    Рис. 211 Схематичное отображение работы свойства justify-content

    Перейдем к рассмотрению следующего примера:

    В этом примере мы разместили пять блочных флекс контейнеров, внутри них мы разместили по три элемента

    Первый контейнер имеет значение flex-start свойства justify-content , это значение определяет, что флекс элементы позиционируются в начале контейнера. Это значение по умолчанию и указано лишь для демонстрационной цели.

    Второй контейнер имеет значение flex-end свойства justify-content , это значение определяет, что флекс элементы позиционируются в конце контейнера.

    Третий контейнер имеет значение center свойства justify-content , это значение определяет, что флекс элементы позиционируются в центре контейнера.

    Четвертый контейнер имеет значение space-between свойства justify-content , это значение определяет, что флекс элементы равномерно распределяются по всей строке, при этом первый флекс элемент позиционируются в начале контейнера, а последний флекс элемент позиционируется в конце контейнера.

    Пятый контейнер имеет значение space-between свойства justify-content , это значение определяет, что флекс элементы равномерно распределяются по всей строке, при этом пустое пространство между первым и после последнего флекс элемента равно половине между соседними элементами в контейнере.

    Результат нашего примера:

    Рис. 212 Пример использования свойства justify-content.

    В настоящее время добавлена поддержка значения space-evenly свойства justify-content , которое позволяет разместить четный промежуток между каждым элементом, включая начальний и дальний конец контейнера:

    Вертикальное выравнивание

    CSS свойство align-content определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально).

    Схематичное отображение работы свойства align-content отображено на следующем изображении:

    Рис. 213 Схематичное отображение работы CSS свойства align-content

    Перейдем к рассмотрению следующего примера:

    В этом примере мы разместили шесть блочных флекс контейнеров, внутри них мы разместили по шесть элементов

    Первый контейнер имеет значение stretch свойства align-content , это значение определяет, что строки внутри флекс контейнера равномерно растягиваются, заполняя свободное пространство. Это значение по умолчанию и указано лишь для демонстрационной цели.

    Второй контейнер имеет значение flex-start свойства align-content , это значение определяет, что строки внутри флекс контейнера располагаются в начале поперечной оси.

    Третий контейнер имеет значение flex-end свойства align-content , это значение определяет, что строки внутри флекс контейнера располагаются с конца поперечной оси.

    Четвертый контейнер имеет значение center свойства align-content , это значение определяет, что строки внутри флекс контейнера располагаются по центру контейнера.

    Пятый контейнер имеет значение space-between свойства align-content , это значение определяет, что строки внутри флекс контейнера равномерно распределяются, при этом первая строка позиционируются в начале поперечной оси, а последняя строка позиционируется с конца поперечной оси.

    Шестой контейнер имеет значение space-between свойства align-content , это значение определяет, что строки внутри флекс контейнера равномерно распределяются, при этом пространство между двумя соседними строками одинаково, а пустое пространство перед первой строкой и после последней строки равно половине от пространства между соседними строками.

    Результат нашего примера:

    Рис. 214 Пример использования свойства align-content.

    В настоящее время добавлена поддержка значения space-evenly свойства align-content , которое позволяет разместить четный промежуток между каждой строкой, включая верхний и нижний край контейнера:

    Выравнивание по высоте строки

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

    Схематичное отображение работы свойства align-items отображено на следующем изображении:

    Рис. 215 Схематичное отображение работы CSS свойства align-items

    Перейдем к рассмотрению следующего примера:

    В этом примере мы разместили пять блочных флекс контейнеров, внутри них мы разместили по пять элементов

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

    Второй контейнер имеет значение flex-start свойства align-items , это значение определяет, что флекс элементы располагаются в начале контейнера (начало поперечной оси).

    Третий контейнер имеет значение flex-end свойства align-items , это значение определяет, что флекс элементы располагаются в конце контейнера (конец поперечной оси).

    Четвертый контейнер имеет значение center свойства align-items , это значение определяет, что флекс элементы располагаются по центру контейнера (середина поперечной оси).

    Пятый контейнер имеет значение space-between свойства align-items , это значение определяет, что флекс элементы распологаются по их базовой линии.

    Результат нашего примера:

    Рис. 216 Пример использования свойства align-items.

    CSS Flexbox основы c примерами

    Использование flexbox

    Flexbox применяется не к самим элементам, которые необходимо сгруппировать а к содержащему их контейнеру. Для этого необходимо задать ему css свойство display: flex;.

    Примеры:

    С использованием flexbox

    Если необходимо чтобы flexbox контейнер был inline элементом (строчным), то следует использовать свойство display: inline-flex;.

    flex-direction

    Элементам можно задать также направление размещения. Для этого используется свойство flex-direction.

    У свойства может быть 4 параметра

    • row — отображение строкой (используется по умолчанию)
    • column — отображение столбцом
    • row-reverse — строка в обратном направлении
    • column-reverse — столбец в обратном направлении

    Примеры:

    flex-wrap

    Элементы в контейнере изначально выстраиваются в 1 линию, что может влиять на их размер. Для того чтобы этого избежать используется свойство flex-wrap: wrap;.

    Пример:

    Дефолтное значение flex-wrap: nowrap;

    Используем flex-wrap: wrap;

    justify-content

    Для группировки элементов можно использовать свойство justify-content.

    У свойства может быть 6 параметров

    • flex-start — элементы у левого края контейнера (используется по умолчанию)
    • flex-end — элементы у правого края контейнера
    • center — элементы по центру
    • space-between — элементы на всю длину контейнера, между ними равное расстояние
    • space-around — элементы на всю длину контейнера, вокруг них равное расстояние
    • space-evenly — элементы на всю длину контейнера, между ними и стенками контейнера равное расстояние
    Илон Маск рекомендует:  Предопределённые константы pcre
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL