Как работает css flexbox

Flexbox

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

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

Почему Flexbox?

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

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

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

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

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

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

Вы увидите элемент <header> с заголовком верхнего уровня внутри, и элемент <section> содержащий три элемента <article> . Мы будем использовать их для создания стандартного трёхколоночного макета.

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

Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение display в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы <article> , поэтому мы устанавливаем это значение на <section> (который становится flex контейнером):

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

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

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

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

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

flex_terms.png

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

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

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

В 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 кода:

Это безразмерное значение пропорции, которое указывает, сколько свободного пространства на главной оси (main axis) каждый flex элемент сможет занять. В этом случае, мы даём каждому элементу <article> значение 1, а это значит, что они будут занимать равное количество свободного места в макете, которое осталось после установки свойств padding и margin.

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

Обновив страницу, вы увидите, что третий элемент <article> занимает в два раза больше доступной ширины, чем два других — итого теперь доступно 4 единицы пропорции. Первые два flex элемента имеют по одной единице, поэтому берут 1/4 пространства каждый. А у третьего 2 единицы, так что он берёт 2/4 свободного места (или 1/2).

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

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

Настоящая ценность flexbox можно увидеть в его гибкости/отзывчивости — если изменить размер окна или добавить ещё элемент <article> , макет будет и дальше выглядеть также хорошо.

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 (см. вживую).

HTML для этого довольно простой. У нас есть элемент <section> , содержащий три <article> . Третий <article> содержит ещё три <div> .

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

Прежде всего, мы устанавливаем дочерние элементы <section> в виде flex блоков.

Затем мы устанавливаем несколько значений на самих <article> . Обратите внимание на второе правило: мы устанавливаем третий <article> , чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.

Затем мы берём первый <div> . Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы <button> ) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.

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

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

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

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

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

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

Подытожим

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

Гайд по flexbox

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

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

  1. Что это?
  2. Основные термины
  3. Свойства флекс-контейнера
  1. display
  2. flex-direction
  3. flex-wrap
  4. flex-flow
  5. justify-content
  6. align-items
  7. align-content
  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self
  7. Ссылки
  1. Егор Левченко
  2. Алёна Батицкая
  • Егор Левченко ,
  • Светлана Коробцева

Обновлено 9 ноября 2021

Что это?

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

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

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

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

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

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

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

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

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

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

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

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

display

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

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

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

flex-direction

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

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

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

Важный момент: на сайтах с направлением текста справа налево, например, на сайте на арабском языке, для значений row и row-reverse основная ось будет идти в обратном направлении. Для значений column и column-revers своё направление поменяет поперечная ось.

flex-wrap

По умолчанию значение у свойства flex-wrap — nowrap . При этом флекс-элементы помещаются (или пытаются уместиться) в один ряд и не переносятся в новый ряд, даже если не влезают в размеры родителя.

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

Ещё одно возможное значение — wrap-reverse . В этом случае элементы будут располагаться снизу вверх, заполнив собой сперва нижний ряд, а те, что не влезли, перепрыгнут в ряд выше.

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

flex-flow

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

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

justify-content

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

  • flex-start (значение по умолчанию) — элементы прижимаются к краю, от которого начинается основная ось.
  • flex-end — элементы прижимаются к краю, у которого основная ось заканчивается.
  • start — элементы прижимаются к тому краю, откуда начинается чтение на том языке, на котором отображается сайт. Например, для русского языка элементы прижмутся к левому краю при горизонтальной основной оси, а для арабского языка — к правому краю.
  • end — элементы прижимаются к краю, противоположному началу направления чтения на том языке, на котором отображается сайт. Например, при горизонтальной основной оси на русском языке элементы прижмутся к правому краю.
  • left — элементы прижмутся к левому краю родителя. В случае, если указано свойство flex-direction: column , значение срабатывает как start .
  • right — элементы прижмутся к правому краю. В случае, если указано свойство flex-direction: column , значение срабатывает как start .
  • center — элементы выстраиваются по центру родителя.
  • space-between — крайние элементы прижимаются к краям родителя, оставшиеся выстраиваются внутри контейнера равномерно, так, чтобы между ними были одинаковые отступы.
  • space-around — свободное пространство делится поровну между элементами и по половине от этой доли размещается по бокам от каждого элемента. Таким образом, между соседними элементами будет равное расстояние, а снаружи крайних элементов — по половине этого расстояния.
  • space-evenly — свободное место будет распределено так, чтобы расстояние между любыми двумя элементами было одинаковым и расстояние от крайних элементов до края было таким же.

Хотя большинство значений поддерживаются основными браузерами, с некоторыми из них могут быть трудности. Поэтому лучше на всякий случай проверяйте поддержку на Can I use.

align-items

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

  • stretch (значение по умолчанию) — элементы растягиваются вдоль поперечной оси так, чтобы заполнить всего родителя. Это очень удобно, если вы делаете двухколоночный макет. Раньше приходилось при помощи разных костылей добиваться одинаковой высоты, а теперь достаточно сделать контейнер флексом, и колонки по умолчанию будут одной высоты.
  • flex-start или start — элементы выстраиваются у начала поперечной оси. Разница между ними лишь в том, что второе значение «уважает» направление чтения выбранного языка.
  • flex-end или end — элементы выстраиваются у конца поперечной оси. Разница между первым и вторым значениями аналогична предыдущему пункту.
  • center — элементы выстраиваются по центру поперечной оси.
  • baseline — элементы выравниваются по базовой линии текста. «Базовая линия» — baseline — воображаемая линия, проходящая по нижнему краю знаков шрифта (без учёта выносных элементов).

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

align-content

Свойство распределяет свободное пространство по поперечной оси между рядами флекс-элементов. Предположим, у вас 11 элементов в 3 рядах. Если размер родителя по поперечной оси позволяет, то при помощи align-content можно распределять строчки элементов: по верхнему краю, по нижнему, по центру или равномерно.

Не имеет видимого значения, если элементы располагаются в один ряд.

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

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

order

При помощи свойства order можно менять порядок отображения флекс-элементов внутри флекс-контейнера.

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

Значение задаётся в виде целого отрицательного или положительного числа. Элементы встают по возрастающей.

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

flex-grow

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

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

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

flex-shrink

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

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

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

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

flex-basis

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

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

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

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

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

align-self

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

Ссылки

На практике

Егор Левченко

Во время работы стоит быть особенно внимательным со свойствами, которые меняют внешнее расположение элементов внутри flex-контейнера: например flex-direction: row-reverse или column-reverse , а также со свойством order .

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

Цель крутого фронтендера — решать задачи бизнеса, а не писать много кода. Центрирование блока внутри родителя можно сократить до двух строк:

  1. Родителя сделать флекс-контейнером.
  2. Дочернему элементу задать margin: auto .

Ждём сокращения кода до одной строки =)

Алёна Батицкая

&#128736; Раньше было затруднительно прижать футер к нижнему краю экрана вне зависимости от количества контента на странице. Приходилось идти на всякие ухищрения и городить костыли. Теперь с появлением флексов всё стало просто.

Оборачиваем всю страницу в блок, делаем его флекс-контейнером, внутрь вкладываем хэдер, мейн и футер. Родителю задаём flex-direction: column чтобы блоки встали друг под другом, а не в ряд, и min-height: 100vh , чтобы он занимал как минимум всю высоту экрана. Мейну задаём flex: 1 , и вуаля! Центральный блок страницы будет всегда растягиваться на всё доступное свободное пространство. Из-за этого футер всегда будет прижиматься к нижнему краю страницы. При этом, если контента в мейне будет больше чем на один экран, то он растянется и подстроится, ничего не сломается.

&#128736; Частой проблемой в вёрстке до появления флексбоксов было вертикальное выравнивание блока внутри родителя. Использовались хаки с трансформом, отступами, высотой строки и прочие костыли.

CSS Flexbox – верстка на флексах

Александр Мальцев

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

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

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

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

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

Основы CSS Flexbox

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

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

Элементы CSS Flexbox

По умолчанию flex-элементы во flex-контейнере занимают всю его высоту.

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

Устройство flex-контейнера. Направление осей

На рисунке представлена схема устройства flex-контейнера:

Схема устройства flex-контейнера в CSS flexbox. Направление осей

Направление расположение flex-элементы в flex-контейнере определяется посредством осей.

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

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

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

С помощью этого свойства можно сделать так, чтобы flex-элементы располагались не рядами (rows), а колонками (columns). Осуществляется это с помощью значения column или column-reverse .

Расположение flex-элементов в CSS Flexbox при установке flex-контейнеру свойства flex-direction со значением column

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

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

Но это можно изменить. Разрешить перенос flex-элементов на новые линии осуществляется с помощью установки flex-контейнеру CSS свойства flex-wrap со значением wrap или wrap-reverse .

Flex-сетка в которой разрешён перенос flex-элементов на новые линии

Значения wrap и wrap-reverse CSS-свойства flex-wrap определяют направление поперечной оси .

Свойства flex-direction и flex-wrap можно указать с помощью универсального CSS свойства flex-flow :

Выравнивание flex-элементов

Во Flexbox выравнивание элементов внутри контейнера осуществляется по двум направлениям (осям).

Выравнивание flex-элементов по направлению главной оси

Выравнивание элементов вдоль основной оси осуществляется с помощью CSS свойства justify-content :

Способы выравнивания flex-элементов вдоль направления главной оси

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

Выравнивание flex-элементов во flex-контейнере по направлению поперечной оси осуществляется с помощью CSS-свойства align-items :

Способы выравнивания flex-элементов вдоль направления поперечной оси

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

CSS Flexbox позволяет выравнивать не только сами flex-элементы, но и линии на которых они расположены.

CSS Flexbox. Способы выравнивания линий во flex-контейнере

Свойство align-content имеет смысл использовать только тогда, когда flex-элементы во flex-контейнере располагаются на нескольких линиях. Чтобы это произошло, необходимо, во-первых, чтобы ширина всех flex-элементов была больше ширины flex-контейнера, а во-вторых flex-контейнер должен иметь в качестве CSS-свойства flex-wrap значение wrap или wrap-reverse .

CSS-свойство align-self

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

Как работает CSS свойство align-self

Изменение порядка следования flex-элементов

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

Flexbox - Как работает CSS свойство order

Управление шириной flex-элемента

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

CSS-свойство flex-basis

Данное свойство предназначено для установления начальной ширины flex-элементу. Задавать значение ширины можно посредством различных единиц измерения, таких как px, %, em и др. По умолчанию данное свойство имеет значение auto (в этом случае ширина элемента будет рассчитываться автоматически на основании его содержимого).

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

CSS-свойство flex-grow

Это свойство определяет, может ли начальная ширина flex-элемента увеличиваться (расти). Увеличение ширины flex-элемента осуществляется за счёт свободного пространства линии. В качестве значения CSS-свойства flex-grow указывается целое число. Именно это значение и определяет (если оно больше или равно 1) какую часть свободного пространства flex-элемент заберёт себе.

Как работает CSS свойство flex-grow

В этом примере, если flex-элементы расположены на одной линии и в ней есть свободное пространство (600×(1-0,8)=120px):

  • к ширине элемента .flex-container_element-1 добавится 1/5 часть этого пространства (120×1/5=24px);
  • к ширине элемента .flex-container_element-2 добавится 4/5 части этого пространства (120×4/5=96px).

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

По умолчанию CSS свойство flex-grow имеет значение 0. Это означает, что flex-элемент не может расти (увеличивать свою ширину).

CSS-свойство flex-shrink

Данное свойство определяет, может ли ширина flex-элемента уменьшиться. Уменьшение ширины flex-элемента будет осуществляться только в том случае, если ширины линии будет не достаточно для отображения всех flex-элементов, расположенных в ней. Необходимая ширина рассчитывается на основании начальной ширины, который имеет каждый flex-элемент в ней.

Как работает CSS свойство flex-shrink

Ширина flex-контейнера 500px. Для отображения flex-элементов необходимо 600px. В итоге не хватает 100px. В этом примере уменьшаться могут 2 flex-элемента ( .flex-container_element-1 и .flex-container_element-2 ). Ширина первого flex-элемента .flex-container_element-1 в данном случае составит 300 – 1/4*100= 275px. Ширина второго flex-элемента .flex-container_element-2 в данном случае составит 300 – 3/4*100= 225px.

Значение по умолчанию:

Если вам необходимо запретить уменьшение ширины flex-элементу, то в качестве значения свойства flex-shrink необходимо указать число 0.

CSS-свойство flex

Для удобной установки flex-grow , flex-shrink и flex-basis можно использовать CSS свойство flex .

Значение по умолчанию:

Пример верстки макета на CSS Flexbox

В этом разделе создадим простой адаптивный макет всей страницы на CSS Flexbox.

Структура макета будет состоять из 3 секций:

  • header (для вывода заголовка и основного меню);
  • main (для отображения основной части);
  • footer (для футера).

Основную часть (main) в свою очередь разделим ещё на 2 раздела (их позиционирование будем осуществлять с помощью CSS Flexbox). На больших экранах (>=992px) эти разделы выстроим горизонтально, а на остальных — вертикально (<992px).

Макет веб-страницы, созданный с использованием CSS Flexbox

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

Для «превращения» блока во flex-контейнер используется класс row . Установку ширины flex-элементам .col__article и .col__aside внутри flex-контейнера выполнено с использованием CSS-свойства flex .

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

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

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