Направление флексбоксов


Содержание

Frontender Magazine

Модуль Flexbox-лейаута (flexible box — «гибкий блок», на данный момент W3C Candidate Recommendation) ставит задачу предложить более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический (отсюда слово «гибкий»).

Главная задумка flex-вёрстки в наделении контейнера способностью изменять ширину/высоту (и порядок) своих элементов для наилучшего заполнения пространства (в большинстве случаев — для поддержки всех видов дисплеев и размеров экранов). Flex-контейнер растягивает элементы для заполнения свободного места или сжимает их, чтобы предотвратить выход за границы.

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

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

Основы

Т.к. flexbox — это целый модуль, а не просто единичное свойство, он объединяет в себе множество свойств. Некоторые из них должны применяться к контейнеру (родительскому элементу, так называемому flex-контейнеру), в то время как другие свойства применяются к дочерним элементам, или flex-элементам.

Если обычный лейаут основывается на направлениях потоков блочных и инлайн-элементов, то flex-лейаут основывается на «направлениях flex-потока». Ознакомьтесь с этой схемой из спецификации, разъясняющей основную идею flex-лейаутов.

В основном элементы будут распределяться либо вдоль главной оси (от main-start до main-end), либо вдоль поперечной оси (от cross-start до cross-end).

  • main-axis — главная ось, вдоль которой располагаются flex-элементы. Обратите внимание, она необязательно должна быть горизонтальной, всё зависит от свойства flex-direction (см. ниже).
  • main-start | main-end — flex-элементы размещаются в контейнере от позиции main-start до позиции main-end.
  • main size — ширина или высота flex-элемента в зависимости от выбранной основной величины. Основная величина может быть либо шириной, либо высотой элемента.
  • cross axis — поперечная ось, перпендикулярная к главной. Её направление зависит от направления главной оси.
  • cross-start | cross-end — flex-строки заполняются элементами и размещаются в контейнере от позиции cross-start и до позиции cross-end .
  • cross size — ширина или высота flex-элемента в зависимости от выбранной размерности равняется этой величине. Это свойство совпадает с width или height элемента в зависимости от выбранной размерности.

Свойства

display: flex | inline-flex;

Применяется к: родительскому элементу flex-контейнера.

Определяет flex-контейнер (инлайновый или блочный в зависимости от выбранного значения), подключает flex-контекст для всех его непосредственных потомков.

  • CSS-столбцы columns не работают с flex-контейнером
  • float , clear и vertical-align не работают с flex-элементами

flex-direction

Применяется к: родительскому элементу flex-контейнера.

Устанавливает главную ось main-axis , определяя тем самым направление для flex-элементов, размещаемых в контейнере.

  • row (по умолчанию): слева направо для ltr , справа налево для rtl ;
  • row-reverse : справа налево для ltr , слева направо для rtl ;
  • column : аналогично row , сверху вниз;
  • column-reverse : аналогично row-reverse , снизу вверх.

flex-wrap

Применяется к: родительскому элементу flex-контейнера.

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

  • nowrap (по умолчанию): однострочный / слева направо для ltr , справа налево для rtl ;
  • wrap : многострочный / слева направо для ltr , справа налево для rtl ;
  • wrap-reverse : многострочный / справа налево для ltr , слева направо для rtl .

flex-flow

Применяется к: родительскому элементу flex-контейнера.

Это сокращение для свойств flex-direction и flex-wrap , вместе определяющих главную и поперечную оси. По умолчанию принимает значение row nowrap .

justify-content

Применяется к: родительскому элементу flex-контейнера.

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

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

align-items

Применяется к: родительскому элементу flex-контейнера.

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

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

align-content

Применяется к: родительскому элементу flex-контейнера.

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

Замечание: это свойство не работает с однострочным flexbox.

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

order

Применяется к: дочернему элементу / flex-элементу.

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

flex-grow

Применяется к: дочернему элементу / flex-элементу.

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

Если у всех элементов свойство flex-grow задано как 1 , то каждый потомок получит внутри контейнера одинаковый размер. Если вы задали одному из потомков значение 2 , то он заберёт в два раза больше места, чем другие.

Отрицательные числа не принимаются.

flex-shrink

Применяется к: дочернему элементу / flex-элементу.

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

Отрицательные числа не принимаются.

flex-basis

Применяется к: дочернему элементу / flex-элементу.

Определяет размер по умолчанию для элемента перед распределением пространства в контейнере.

Применяется к: дочернему элементу / flex-элементу.

Это сокращение для flex-grow , flex-shrink и flex-basis . Второй и третий параметры ( flex-shrink , flex-basis ) необязательны. Значение по умолчанию — 0 1 auto .

align-self

Применяется к: дочернему элементу / flex-элементу.

Позволяет переопределить выравнивание, заданное по умолчанию или в align-items , для отдельных flex-элементов.

Обратитесь к описанию свойства align-items для лучшего понимания доступных значений.

Примеры

Начнём с очень-очень простого примера, встречающегося практически каждый день: выравнивание точно по центру. Нет ничего проще, если использовать flexbox.

Этот пример основывается на том, что margin во flex-контейнере, заданный как auto , поглощает лишнее пространство, поэтому задание отступа таким образом выровняет элемент ровно по центру по обеим осям.

Теперь давайте используем какие-нибудь свойства. Представьте набор из 6 элементов фиксированного размера (для красоты), но с возможностью изменения размера контейнера. Мы хотим равномерно распределить их по горизонтали, чтобы при изменении размера окна браузера всё выглядело хорошо (без @media -запросов!).

Готово. Всё остальное — уже дело оформления. Ниже размещён CodePen, демонстрирующий этот пример. Обязательно попробуйте растянуть/сжать окно браузера и посмотрите, что произойдёт.

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

Давайте попробуем кое-что получше и поиграем с гибкостью flex-элементов! Как насчёт ориентированного на мобильные устройства трёхколоночного макета с полноширинной шапкой и подвалом? И другим порядком расположения.

Похожие свойства

Другие ресурсы

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

  • (modern) означает поддержку нового синтаксиса из спецификации ( display: flex; )
  • (hybrid) означает поддержку старого неофициального синтаксиса из 2011 ( display: flexbox; )
  • (old) означает поддержку старого синтаксиса из 2009 ( display: box; )
Chrome Safari Firefox Opera IE Android iOS
21+ (modern)
20- (old)
3.1+ (old) 2-21 (old)
22+ (new)
12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

Браузер Blackberry версии 10+ поддерживает новый синтаксис.

Для более подробной информации о том, как и когда использовать различные синтаксисы для обеспечения лучшей поддержки браузерами, обратитесь к этой статье (CSS-Tricks) или этой статье (DevOpera).

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 — элементы на всю длину контейнера, между ними и стенками контейнера равное расстояние

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-системы.

    Генератор Flexbox верстки

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

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

    Разбираемся с флексбоксами CSS

    ����‍�� Премиум-темы для Вордпресс с русскоговорящей поддержкой

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

    Не помню точно в каком году появилась блочная верстка. Я перешел на нее с табличной примерно в 2006. Не смотря на кучу новых семантических тегов HTML5 и новых свойств CSS3, подход к верстке в целом особо не менялся с годами — в основе всегда были позиционированные блоки. Сегодня блочная верстка практически умерла , как и когда-то табличная. На смену ей пришли и плотно заняли свое место флексбоксы и гриды (про гриды я расскажу отдельно). И это не просто очередные новомодные свойства CSS. Флексбоксы — это требование времени, вызванное необходимостью упрощения адаптивной верстки.

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

    Что такое флексбокс

    Flexbox (CSS3 Flexible Box) — режим разметки, созданный для более предсказуемого упорядочения элементов на страницах, адаптированных под различные размеры экранов и устройств. В большинстве случаях флексбоксы лучше блочной модели разметки, поскольку не использует обтекания (floats), не схлопывают отступления flex-контейнера и его содержимого (margin collapse).

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

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

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

    Основные свойства флексбоксов

    1. Порядок и ориентация

    2. Позиционирование

    3. Гибкость

    Display

    Флексбокс может быть блочным (flex) или строковым (inline-flex). Работает это в привычном для CSS виде.

    Flex-direction

    Направление оси контейнера может быть четырех видов:

    1. row — строка (по умолчанию);
    2. row-reverse — строка в обратном порядке;
    3. column — колонка;
    4. column-reverse — колонка в обратном порядке.

    Flex-wrap

    Управление переносом элементов.

    1. nowrap (по умолчанию) — элементы располагаются в один ряд или в одну колонку в зависимости от заданного flex-direction;
    2. wrap — элементы переносятся на следующий ряд;
    3. wrap-reverse — элементы переносятся на следующий ряд в обратном направлении.

    Flex-flow

    Сокращение свойств flex-direction и flex-wrap, которые определяют основную и поперечные оси контейнера. По-умолчанию row nowrap.

    Order

    Управление порядком элементов.

    Например, чтобы выдвинуть вперед всех четвертый элемент, зададим ему order=-1.

    Justify-content

    Управление выравниванием по главной оси.

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

    Align-items

    Выравнивание элементов по поперечной оси внутри ряда.

    1. flex-start — от начала поперечной оси;
    2. flex-end — от конца поперечной оси;
    3. center — по центру;
    4. baseline — по базовой линии;
    5. stretch — по всему пространству поперечной оси (по умолчанию).

    Align-self

    Выравнивание по поперечной оси отдельных элементов.

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

    Align-content

    Выравнивание внутри многострочного контейнера.

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

    Flex-grow

    Коэффициент увеличения элемента при наличии свободного пространства в контейнере.

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

    Flex-shrink

    Коэффициент уменьшения элемента при отсутствии свободного пространства в контейнере.

    Flex-basis

    Базовая ширина элемента для распределения свободного пространства контейнера.

    В примере ширина четвертого элемента равна 50%, пятого — в зависимости от ширины контента.

    В заключение

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

    Поддержка флексбоксов браузерами на 2020 год

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

    Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.

    Подпишитесь на рассылку
    Один раз в месяц все новые материалы в одном письме

    200 бесплатных наборов кистей для Фотошопа
    516

    Как в Фотошопе сменить русский язык на английский
    187

    Как быстро наполнить сайт на WordPress с помощью плагина WP All Import
    166

    25 лучших шаблонов для создания интернет-магазина на OpenCart
    160

    Как открыть *.CDR в Adobe Illustrator
    136

    5 лучших книг по Вордпресс на русском языке
    135

    Как быстро удалить все исходящие заявки в друзья во Вконтакте
    125

    10 рекомендуемых книг-бестселлеров по PHP
    117

    Как отправить большое видео в Ватсап
    108

    20 лучших шаблонов Вордпресс для сферы услуг
    100

    Как импортировать большую базу данных MySQL в обход ограничений phpMyAdmin
    99

    Как скачать приватное видео из фейсбука
    91

    Установка временнОй зоны в PHP
    86

    Как использовать Media Query в JavaScript
    85

    20 лучших Вордпресс шаблонов для образовательных сайтов
    81

    Как включить мультисайт и создать сеть сайтов на Вордпресс
    74

    Подключаем цели Яндекс Метрики к WordPress Contact Form 7
    62

    Как проверить сайт на технические ошибки онлайн
    61

    10 бесплатных шаблонов лендингов в PSD
    57

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

    Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

    Flexbox: всё, что Вам нужно о нём знать. Это просто!

    Flexbox — новое слово в вёрстке. всё, что Вам нужно о нём знать — это просто и очень удобно! Основные правила работы мы опишем в этой статье.

    Что такое Flexbox, зачем он нужен, почему бы не продолжить колдовать с помощью float?

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

    Как начать пользоваться Flexbox? Как его включить?

    Никаких сложных подключений, никакой магии! Достаточно просто задать элементу, к которому Вы хотите применить «резиновую» верстку, display: flex . Соответственно все вложенные элементы становятся гибкими и подчиняются правилам flexbox. Далее весь его механизм основан на расположении элементов вдоль двух осей: главной и поперечной.

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

    Как видно, как только контейнер принимает условное свойство «flex» поведение всех элементов внутри него начинает подчиняться правилам потока относительно главной и поперечной оси. Итак, направление главной оси по умолчанию — слева направо. Однако, при необходимости, можно разворачивать её в противоположную сторону, используя свойство flex-direction .

    Какие значения может принимать свойство flex-direction :

    • row — это значение установлено по умолчанию, и означает стандартное направление слева направо;
    • row-reverse — справа налево ;
    • column — направление оси сверху вниз;
    • column-reverse — снизу вверх;

    Поперечная ось и направление потока флекс-элементов вдоль нее

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

    • При горизонтальном направлении главной оси, направление поперечной — СВЕРХУ ВНИЗ;
    • При вертикальном направлении главной оси, направление поперечной — СЛЕВА НАПРАВО;

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

    Рассмотрим основные приемы управления положением флекс-элементов внутри флекс-контейнера.

    Justify-content

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

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

    Align-items

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

    • strech — значение по умолчанию — растягивает элементы на всю высоту флекс-контейнера;
    • center — размещает флекс-элементы в месте пересечения главное и поперечной оси — строго по центру;
    • flex-start — в начале поперечной оси;
    • flex-end — в конце поперечной оси;
    • baseline — располагает флекс-элементы относительно базовой линии текста внутри флекс-контейнера;

    Align-self

    Выравнивание флекс-элементов, а не флекс-контенера. Принимает те же значения, что align-items

    Flex-wrap

    Это свойство решает проблему «перенаселения» флекс-контейнера флекс-элементами. Когда их становится слишком много, для того, чтобы они могли быть размещены на одной линии, flex-wrap может разрешить этот вопрос, разрешив или запретив перенос элементов на новую строку. Его значения:

    • nowrap — по умолчанию — запрещает перенос элементов на новую строку;
    • wrap — разрешает перенос элементов на новую строку;
    • wrap-reverse — разрешает перенос элементов на новую строку, но они располагаются в обратном порядке;

    Align-content

    С помощью этого свойства можно выравнивать ряды флекс-элемента вдоль поперечной оси. Его значения:

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

    Order

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

    Flex-basis

    Это свойство задаёт базовый размер флекс-элементов. Если его не задать, либо определить как auto, то тогда размер элемента будет основан на свойствах w >Flex-grow

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

    • Значение flex-grow равно 0 — по умолчанию;
    • flex-grow > 0 — флекс-элемент растягивается, занимая свободное место;

    Чтобы рассчитать итоговый размер, учитывая flex-grow, существует следующий алгоритм:

    • Свободное место = Ширина контента — Сумма базовых размеров элементов;
    • Доля свободного места = Свободное место/Сумма flex-grow всех элементов;
    • Итоговый размер = Базовый размер + (Доля свободного места*flex-grow);

    Flex-shrink

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

    • Значение flex-shrink=1 — по умолчанию;
    • flex-shrink > 0 — элемент будет уменьшаться;
    • flex-shrink = 0 — элемент не будет уменьшаться;

    Чтобы рассчитать итоговый размер, учитывая flex-shrink, существует следующий алгоритм:

    • Отрицательное пространство (ОП) = Ширина контента — Сумма базовых размеров элементов;
    • Сумма произведений базовых размеров (СПБР) = (Базовый размер1*flex-shrink1) + (Базовый размер2*flex-shrink2)+…;
    • Нормированный коэффициент сжатия (НКС) = (Базовый размер*flex-shrink)/СПБР;
    • Итоговый размер = Базовый размер — (НКС*ОП);

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

    Практическое применение Flexbox

    by Andrej — Category Веб-дизайнеру on 13/10/2020

    В общем в данной статье хочу рассказать о такой чудесной спецификации, под названием «CSS Flexible Box Layout Module» и показать некоторые ее интересные особенности и примеры применения.

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

    Техническая часть

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

    Итак, во FlexBox есть два основных типа элементов: Гибкий Контейнер (Flex Container) и его дочерние элементы — Гибкие Элементы (Flex Item). Для инициализации контейнера достаточно присвоить, через css, элементу display: flex; или display: inline-flex;. Разница между flex и inline-flex заключается лишь в принципе взаимодействия с окружающими контейнер элементами, подобно display: block; и display: inline-block;, соответственно.

    Внутри гибкого контейнера создаются две оси, главная ось (main-axis) и перпендикулярная или кросс ось (cross axis). Преимущественно гибкие элементы выстраиваются именно по главной оси, а потом уже по кросс оси. По умолчанию главная ось горизонтальная и имеет направление слева направо, а кросс ось вертикальна и направлена сверху вниз.

    Направлением осей можно управлять с помощью css-свойства flex-direction. Данное свойство принимает ряд значений:
    row (default): Главная ось гибкого контейнера имеет ту же ориентацию, как и инлайн ось текущего режима направления строк. Начало (main-start) и конец (main-end) направления главной оси соответствуют началу (inline-start) и концу (inline-end) инлайн оси (inline-axis).
    row-reverse: Все то же самое, что и в row только main-start и main-end меняются местами.
    column: так же само как и row, только теперь главная ось направлена сверху вниз.
    column-reverse: так же само как row-reverse, только главная ось направлена снизу вверх.
    Как это работает можно посмотреть в примере на jsfiddle.

    По умолчанию все гибкие элементы в контейнере укладываются в одну строку, даже если не помещаются в контейнер, они выходят за его границы. Данное поведение переключается с помощью свойства flex-wrap. У этого свойства есть три состояния:
    nowrap (default): гибкие элементы выстраиваются в одну строку слева направо.
    wrap: гибкие элементы строятся в многострочном режиме, перенос осуществляется по направлению кросс оси, сверху вниз.
    wrap-reverse: так же как и wrap, но перенос происходит снизу вверх.

    Для удобства есть дополнительное свойство flex-flow, в котором можно одновременно указать flex-direction и flex-wrap.
    Выглядит это следующим образом: flex-flow: flex-direction + flex-wrap;
    Например:

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

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

    Еще одно похожее свойство на предыдущее это align-content. Только оно отвечает за выравнивание целых строк относительно гибкого контейнера. Оно не будет давать эффекта если гибкие элементы занимают одну строку. Свойство принимает шесть разных значений.
    flex-start: все линии прижимаются к началу кросс-оси
    flex-end: все линии прижимаются к концу кросс-оси
    center: Все линии паком выравниваются по центру кросс оси
    space-between: линии распределяются от верхнего края до нижнего оставляя свободное пространство между строками, крайние же строки прижимаются к краям контейнера.
    space-around: линии равномерно распределяются по контейнеру.
    stretch (default): линии растягиваются занимая все доступное пространство.

    Элементы гибкого контейнера

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

    Одно из основных свойств является flex-basis. С помощью этого свойства мы можем указывать базовую ширину гибкого элемента. По умолчанию имеет значение auto. Это свойство тесно связано с flex-grow и flex-shrink, о которых я расскажу чуть позже. Принимает значение ширины в px, %, em и остальных единицах. По сути это не строго ширина гибкого элемента, это своего рода отправная точка. Относительно которой происходит растягивание или усадка элемента. В режиме auto элемент получает базовую ширину относительно контента внутри него.

    flex-grow задает фактор увеличения элемента при наличии свободного места в контейнере. По умолчанию это свойство имеет значение 0. Давайте представим, что у нас есть гибкий контейнер, который имеет ширину 500px, внутри него есть два гибких элемента, каждый из которых имеет базовую ширину 100px. Тем самым в контейнере остается еще 300px свободного места. Если первому элементу укажем flex-grow: 2;, а второму элементу укажем flex-grow: 1;. В результате эти блоки займут всю доступную ширину контейнера, только ширина первого блока будет 300px, а второго только 200px. Доступные 300px свободного места в контейнере распределились между элементами в соотношении 2:1, +200px первому и +100px второму. Собственно так это и работает.

    Тут мы плавно переходим к другому аналогичному свойству, а именно flex-shrink. flex-shrink по умолчанию имеет значение 1. Оно так же задает фактор на изменение ширины элементов, только в обратную сторону. Если контейнер имеет ширину меньше чем сумма базовой ширины элементов, то начинает действовать это свойство.

    Например:
    Контейнер имеет ширину 600px, а flex-basis элементов по 300px. Первому элементу укажем flex-shrink: 2;, а второму flex-shrink: 1;. Теперь сожмем контейнер на 300px. Следовательно сумма ширины элементов на 300px больше чем контейнер. Эта разница распределяется в соотношении 2:1, получается от первого блока отнимаем 200px, а от второго 100px. Новый размер элементов получается 100px и 200px, у первого и второго элемента, соответственно. Если мы устанавливаем flex-shrink в значение 0, то мы запрещаем сжиматься элементу до размеров меньше чем его базовая ширина.

    Все три свойства можно записать в сокращенной форме при помощи выражения flex. Это имеет следующий вид:
    flex: flex-grow + flex-shrink + flex-basis;
    А так же мы можем писать еще два сокращенных варианта, flex: auto; и flex: none;, что означает flex: 1 1 auto; и flex: 0 0 auto; соответственно.

    Примеры работы flexbox

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

    За счет того что мы для .main указали flex-grow: 1; он растягивается на всю доступную высоту, тем самым прижимая футер к низу. Бонусом в этом решении является, то что футер может быть нефиксированной высоты.

    Разместим теперь логотип и меню в хедере.

    Поскольку для хедера указано flex-wrap: wrap; и justify-content: space-between; логотип и меню раскидывает по разным сторонам хедера, при этом если места для меню будет не хватать оно элегантно сместится под логотип.

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

    Как вы видите для .box-base, там где у нас заголовок и текст, я указал базовую ширину посредством flex-basis: 430px;, а так же запретил усадку блока при помощи flex-shrink: 0;. Этой манипуляцией мы сказали, что контент не может стать меньше чем 430px в ширину. А ввиду того что для .box я указываю flex-wrap: wrap; в тот момент, когда сайд-бар и контент не будут помещаться в контейнер .box, сайд-бар автоматически провалится под контент. И это все без применения @ media! Я считаю это действительно очень круто.

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

    В контейнере три колонки, .banners, .posts, .comments

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

    По макету, нам с контентом, обойтись без @media не получится, поэтому еще немного настроим поведение колонок для ширины alexriz

    Возможно Вас также заинтересует…

    Бессчётное количество обучающих материалов по дизайну, образовательных онлайн и оффлайн семинаров не могут сказать как…

    Измерительные единицы часто употребляются на web-страницах. Они могут быть как на самой HTML-страничке так и…

    Привет читателям! Я решил попробовать сверстать свою тему для wordpress, с применением фреймворка bootstrap 4.…

    Дублированный контент — информация, которая доступна для индексации по нескольким url’ам. Он подразумевает наличие ряда…

    Про CSS

    Flexbox

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

    UPD от 02.02.2020: сделала удобную шпаргалку по флексбоксам, с живыми демками и описаниями из спеки: Flexbox cheatsheet.

    В примерах используется только новый синтаксис. На момент написания статьи правильней всего они отображаются в Chrome. В Firefox работают частично, в Safari — вообще не работают.

    Спецификация на английском есть тут: w3.org/TR/css3-flexbox.

    Согласно сайту caniuse.com, Flexbox не поддерживается 8 и 9-м IE и Opera Mini, а в других браузерах поддерживаются не все свойства и/или требуются префиксы.

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

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

    Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float , clear и vertical-align , а так же свойства, задающие колонки в тексте.

    Приготовим полигон для экспериментов:

    Один родительский блок (желтый) и 5 дочерних.

    Display: flex

    И теперь родительскому элементу добавляем display: flex; . Внутренние div-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.

    display: flex; делает все дочерние элементы резиновыми — flex , а не инлайновыми или блочными, как было изначально.

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

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

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

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

    Flex-direction

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

    row — строка (значение по умолчанию); row-reverse — строка с элементами в обратном порядке; column — колонка; column-reverse — колонка с элементами в обратном порядке.

    row и row-reverse

    column и column-reverse

    Flex-wrap

    В одной строке может быть много блоков. Переносятся они или нет определяет свойство flex-wrap .

    nowrap — блоки не переносятся (значение по умолчанию); wrap — блоки переносятся; wrap-reverse — блоки переносятся и располагаются в обратном порядке.

    Для короткой записи свойств flex-direction и flex-wrap существует свойство: flex-flow .

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

    flex-flow: column; flex-flow: wrap-reverse; flex-flow: column-reverse wrap;

    Демо для row-reverse wrap-reverse :

    Order

    Для управления порядком блоков служит свойство order .

    Возможные значения: числа. Чтобы поставить блок самым первым, задайте ему order: -1 :

    Justify-content

    Для выравнивания элементов есть несколько свойств: justify-content , align-items и align-self .

    justify-content и align-items применяются к родительскому контейнеру, align-self — к дочерним.

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

    Возможные значения justify-content :

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

    flex-start и flex-end

    Align-items

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

    Возможные значения align-items :

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

    Align-self

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

    Возможные значения align-self :

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

    Align-content

    Для управления выравниванием внутри многострочного flex-контейнера есть свойство align-content .

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

    Ps: Некоторые штуки мне так и не удалось увидеть в действии, например, строчку flex-flow: column wrap или полную запись того же flex-direction: column; flex-wrap: wrap; .

    Элементы стоят столбиком, но не переносятся:

    Не срабатывает wrap при flex-direction: column; , хотя в спеке это выглядит вот так:

    Думаю, со временем заработает.

    UPD от 21.06.2014: всё работает, если задать блоку высоту. За подсказку спасибо SelenIT2.

    Flexbox justify-content: полное руководство по центрированию

    Дата публикации: 2020-07-31

    От автора: Flexbox — это популярный модуль макета CSS, который помогает позиционировать элементы HTML на экране. Есть много сценариев использования, когда он может оказаться настоящей находкой; горизонтальное и вертикальное центрирование из их числа. Центрирование Flexbox justify-content решает стандартные проблемы выравнивания, с которыми вы можете столкнуться при работе с традиционной блочной моделью CSS. Это позволяет центрировать элементы внутри их контейнера как по горизонтали, так и по вертикали с помощью всего лишь нескольких строк кода CSS.

    Макеты Flexbox на основе рядов и столбцов

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

    Flex-макет на основе рядов (по умолчанию):

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

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

    Реверсивный макет на основе рядов:

    Flex-макет на основе столбцов:

    Реверсивный макет на основе столбцов:

    На рисунке выше, вы можете увидеть макеты Flexbox с одной строкой, для которых мы не изменяли значение свойства flex-wrap по умолчанию — Nowrap . Поэтому, если вы хотите отображать элементы в нескольких строках или столбцах, добавьте для flex-контейнера также правило flex-wrap: wrap;.

    Как работает центрирование Flexbox?

    Фактически, flexbox не использует понятия «горизонтальное» и «вертикальное» центрирование. Вместо этого он работает с основной и поперечной осями, которые на экране выглядят как горизонтальное и вертикальное центрирование. Направление основной и поперечной осей зависит от значения вышеупомянутого свойства flex-direction.

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

    Когда мы говорим о центрировании flexbox, мы имеем в виду два вида центрирования:

    Центрирование вдоль основной оси (также называемой осью блока).

    Центрирование вдоль поперечной оси (также называемой линейной осью).

    Если вам нужен идеально отцентрированный flex-элемент, вы должны отцентрировать его вдоль обеих осей.

    Центрирование вдоль основной оси

    Вам необходимо использовать свойство justify-content для центрирования flex-элементов вдоль главной оси. Значением по умолчанию — flex-start, которое выравнивает все элементы внутри контейнера flex по началу главной оси. Если вы хотите центрировать элементы, вам нужно использовать его со значением center.

    В случае макетов на основе строк следующий код CSS центрирует элементы по горизонтали (так как здесь, главная ось также проходит горизонтально):

    Илон Маск рекомендует:  Псевдоэлемент -ms-track в CSS
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL