Flexbox — Помощь с flexbox


Содержание

Про 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.

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

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

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

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

Display: Flex

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

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

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

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

Flex Direction

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

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

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

ZIP Service, Москва, можно удалённо, от 100 000 ₽

Полное руководство по Flexbox

Предисловие

Модуль Flexbox Layout (Flexible Box) направлен на то чтобы предоставить более эффективный способ расположения, выравнивания и распределения свободного пространства между элементами в контейнере, даже когда их размер заранее неизвестен и/или динамичен (поэтому слово «flex»).

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

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

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

Основы и терминология

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

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

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

  • main axis — это основная ось flex-контейнера, вдоль которой расположены 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-элемента, в зависимости направления поперечной оси;

Создание гибких макетов с помощью Flexbox CSS

Дата публикации: 2020-10-25

От автора: до появления CSS Grid был Flexbox (который официально известен как CSS Flexible Box Layout Module). Flexbox был разработан для управления макетом в одном направлении — строке (flex-direction: row или row-reverse) или столбце (flex-direction: column или column-reverse). Это контрастирует с сеткой, которая учитывает строки и столбцы.

Базовый гибкий макет создать просто: добавьте для родительского элемента display: flex или display: inline-flex. Эти значения display зададут контекст форматирования Flex для дочерних элементов этого элемента. Как и в случае с сеткой, flex и inline-flex задают внутренний режим отображения. Мы устанавливаем эти значения для контейнера, который ведет себя как блочный или встроенный элемент. Затем потомки этого контейнера располагаются в соответствии с правилами flex-макета.

Примечание. Для более старых версий браузеров на основе Blink, таких как Chrome (≤ 28) и WebKit, таких как Safari (≤8), требуется вендорный префикс. Если ваш проект по-прежнему поддерживает эти браузеры, вам необходимо использовать display: -webkit-flex или display: -webkit-inline-flex. Старые версии Firefox (≤21) также требуют префикса. Используйте для поддержки этих браузеров -moz-flex и -moz-inline-flex.

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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 (в нашем примере это представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования.»> ).

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

Цукерберг рекомендует:  Gamedesign - Оптимизация рендеринга в Unity

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

В 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 (работа с контейнерами).

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

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

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

Что такое Flexbox?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

5 Flexbox методов, о которых вы должны знать

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

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

1. Создание столбцов с одинаковой высотой

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

Flexbox не видит в этом проблемы. Все, что нам нужно, так это инициализировать гибкую модель. Обязательно убедитесь, что flex-direction и align-items имеют значения «по умолчанию».

flex-direction: row; /*Пункты внутри контейнера будут располагаться горизонтально*/

align-items: stretch; /*Пункты внутри контейнер будут принимать всю его высоту*/

2. Изменение порядка

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

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

/*Обратный порядок элементов*/

3.Горизонтальное и вертикальное центрирование

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

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

justify-content: center; /*Центр по главной оси*/

align-items: center; /*Центр по вспомогательной оси*/

4. Создание полностью отзывчивой сетки (Responsive Grids)

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

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

Выравнивание блоков по высоте с помощью flexbox

Ещё одна часто встречающаяся задача — реализовать раскладку с блоками одинаковой высоты.

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

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

float или inline-block не могут «связывать» высоты соседних блоков;

таблицы и CSS-таблицы позволяют делать ячейки одинаковой высоты, но появляются ограничения, связанные с расположением элементов в строках;

минимальная высота не подходит, так как какой-то из блоков всегда может стать выше остальных;

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

Вся теория и выполнение задания доступны по подписке

Подписка — это:

После подписки вы получите доступ:

  • теория курсов без ограничений;
  • доступ ко всем платным курсам;
  • интересные и сложные вызовы для практики;
  • безлимитные проверки испытаний.

Оформить подписку

CSS Flexbox

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

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

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

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

Flexbox элементы

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

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

Пример

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

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

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

Пример

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

Свойство Flex-Direction

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

Пример

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

Пример

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

Пример

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

Пример

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

Свойство Flex-Wrap

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

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

Пример

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

Пример

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

Пример

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

Свойство Flex-Flow

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

Пример

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

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

Пример

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

Пример

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

Пример

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

Пример

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

Пример

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

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

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

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

Пример

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

Пример

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

Пример

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

Пример

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

Пример

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

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

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

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

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

Пример

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

Пример

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

Пример

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

Пример

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

Пример

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

Пример

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

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

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

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

Пример

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

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

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

Пример

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


Свойство Order

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

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

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

Пример

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

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

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

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

Пример

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

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

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

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

Пример

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

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

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

Пример

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

Свойство Flex

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

Пример

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

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

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

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

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

Пример

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

Пример

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

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

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

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

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

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

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

29.0 11.0 22.0 10 48

Свойства Flexbox CSS

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

Освоение flexbox для современных веб-приложений

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

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

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

Flexbox действительно прекрасно себя показывает в HTML5-приложениях. Большинство веб-приложений состоят из ряда модульных, многократно используемых компонентов. Вы можете использовать flexbox для тех участков макета, которые вызывают особую головную боль и для которых в обычных случаях необходимы CSS-хаки. Небольшие участки лайаута очень хорошо работают с flexbox, а для лайаутов большого масштаба можно использовать floats и другие инструменты.

Я c размахом использую flexbox в приложении, над которым сейчас работаю, и я очень доволна тем, как он управляет лайаутом и насколько умно производятся расчеты с блоками. Я хотела бы поделиться некоторыми примерами — буду признателна за любую обратную связь.

Эта статья предполагает, что у вас уже есть представление о flexbox. Множество информации о нем можно найти в интернете. Но имейте в виду, что спецификация претерпела несколько изменений за несколько лет.

Есть три версии flexbox, наибольшая разница в синтаксисе между версиями 2009 и 2012 годов:

  • Новый синтаксис синхронизирован с текущей спецификацией (например, display: flex).
  • Переходный синтаксис — неофициальный синтаксис с 2012 года, поддерживается только IE 10 (например, display: -ms-flexbox).
  • Старый синтаксис с 2009 года (например, display: box).

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

Посмотреть более детально, какой браузер какой синтаксис поддерживает можно на Can I Use .

Браузеры, поддерживающие новый синтаксис

Десктоп:

  • без префикса: Chrome 29+, Firefox 28+, IE 11+, Opera 17+
  • с префиксом: -webkit- для Chrome 21+, Safari 6.1+, Opera 15+

Обратите внимание, что старые версии Firefox (22-27) поддерживают новый синтаксис Flexbox за исключением свойств flex-wrap и flex-flow. Opers (12.1+ и 17+) поддерживает flexbox без вендорного префикса, но промежуточные версии 15 и 16 требуют вендорный префикс.

Touch-устройства:

  • без префикса: Android 4.4+, Opera mobile 12.1+, BlackBerry 10+, Chrome for Android 39+, Firefox for Android 33+, IE 11+ mobile
  • с префиксом: -webkit- для iOS 7.1+

Почти все браузеры, упомянутые выше, имеют старые версии, которые поддерживают предыдущий вариант синтаксиса flexbox, за исключением некоторых свойств, таких как flex-wrap и flex-flow (последний является сокращением свойств flex-direction и flex-wrap). Если избегать свойства flex-wrap (и, соотвественно, использовать flexbox в многострочных лайаутах), мы получаем потрясающую поддержку браузерами, сливая старый и новый синтаксис.

Браузеры, поддерживающие промежуточный синтаксис

Desktop и touch-устройства: IE 10 (with -ms- vendor prefix)

Браузеры, поддерживающие старый синтаксис

Все перечисленные браузеры требуют префикс -webkit- (за исключением Firefox, которому необходим префикс -moz-).

Десктоп: Firefox 2 — 21, Chrome 4 — 20, Safari 3.1 — 6

Touch-устройства: Android 2.1 — 4.3, iOS 3.2 — 6.1, UC browser 9.9 on Android, BlackBerry 7

Для современных браузеров c авто-обновлением (т.е. десктопных Chrome, Firefox, IE и Opera), новый синтаксис работает из коробки.

Браузеры, не поддерживающие flexbox

Десктоп: Старые версии IE (9) и Opera (12)

Touch-устройства: Opera Mini

Если вас испугали вендорные префиксы и изменения в синтаксисе, посмотрите рекомендации Криса Койера .

Такжен вы можете использовать следующие инструменты, чтобы получить наилучшую поддержку браузерами через префиксы:

    Autoprefixer
    Это инструмент для ватоматической расстановки префиксов. Пишете ли вы CSS или используете препроцессор — это то, что нужно.

Среди этих инструментов я бы рекомендовал Autoprefixer. Я не экспериментировал с другими заточенными под препроцессоры решениями и буду рад отзывам. Обратите внимание, если вы используете миксины CSS-фреймворков (каких как Bourbon или Compass для Sass, Nib для Stylus или LESS Hat for LESS), они уже поддерживают вендорные префиксы для flexbox.

С помощью такого инструмента, как Autoprefixer, вы действительно получите большую поддержку flexbox, за исключением IE 9 и Opera Mini. Конечно, вы должны будете тщательно проверить ваше приложение во всех браузерах, чтобы убедиться, что различный синтаксис поддерживается.

Давайте посмотрим на несколько хороших примеров использования flexbox в веб-приложении.

1. Неопределенное число детей в родительском элементе

Use case: В моем приложении еcть фильтр. Количество фильтров зависит от того, авторизован пользователь или нет. Анонимный пользователь видит два фильтра («Popular» и «Latest»), тогда как авторизованный пользователь видит четыре (добавляются «Starred» и «Favorites»).

Проблема: Я хочу написать стили для обоих вариантов без каких-либо изменений в CSS

Обсуждение: Обычно вы используете выражение if в шаблоне, чтобы проверить, авторизован ли пользователь. Если мы используем float при верстке, то для неавторизованного пользователя мы задаем ширину одного фильтра 50%, а для авторизованного — 25%.

Решение: используя flexbox, вы можете задать свойство display: flex родительскому контейнеру, а дочерним — свойство flex равное 1, сделав таким образом дочерние элементы равной ширины внутри контейнера. Таким образом, CSS остается неизменным не зависимо от количества элементов. Помните, что свойство flex — это сокращение flex-grow, flex-shrinkand flex-basis.

Демо:

2. Поля ввода с иконками

Use case: Я хочу добавить смысловые иконки к полям ввода на форме.

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

Обсуждение: Это одна из классических проблем. Разные CSS-фреймворки решают ее по-разному, в основном, используя display: table-cell или абсолютное позиционирование.

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

Демо (используется иконка Font Awesome):

3. Визуальный порядок элементов

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

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

А. Изменение визуального порядка с помощью flex-direction

Use case: У меня есть боковая панель, спозиционированная справа от основного содержимого. На маленьких экранах я хочу, чтобы панель располагалась сверху от основного содержимого, т.е. в обратном порядке.

Проблема: Я не хочу использовать JavaScript или CSS хаки для изменения визуального порядка.

Обсуждение: Flexbox — это удивительный инструмент для адаптивных макетов. Мы можем использовать его двумя способами: использовать свойство flex-direction или свойство order. Давайте рассмотрим первый вариант.

Решение: Расположим боковую панель перед основным содержимым в лайауте. У этого есть две причины: во-первых, мы придерживаемся принципа mobile-first, а во-вторых — такое расположение больше подходит для программ чтения с экрана. Зададим свойство flex-direction: column для родительского контейнера (по умолчанию оно имеет значение row). В медиа запросе для больших экранов, изменим значение flex-direction на row-reverse, это решит нашу задачу.

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

B. Изменение визуального порядка с помощью свойства order

Use case и проблема остаются такими же, как в предыдущем примере.

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

Решение: Зададим свойство flex-direction: column родительскому контейнеру для мобильных устройств. Теперь, в медиа запросе min-width изменим свойство flex-direction на row, чтобы боковая панель отображалась слева, а основное содержимое справа. Чтобы изменить порядок элементов, укажем свойство order: 1 для основного содержимого и order: 2 — для боковой панели!

С. Переключение порядка элементов

Use case: Я хочу отобразить список из пяти наиболее высокооплачиваемых актеров Голливуда в 2013 году, и добавить возможность переключения направления сортировки.

Проблема: Я хочу сделать это на чистом CSS, я не знаю почему и вообще не уверен, возможно ли это.

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

Решение: Добавим переключатель, который будет изменять порядок элементов от меньшего к большему. Ниже добавим список актеров. Используя псевдо-класс :checked, мы выберем следующий за переключателем список и изменим порядок элементов в нем (в помощью flex-direction: column-reverse). Это довольно странно, но прекрасно работает, если вы не используете приложения для чтения с экрана. В приведенном ниже демо, используйте переключатель, чтобы посмотреть результат. В спецификации упоминается, что свойство order не влият ни на tabindex, ни на программы чтения с экрана, но я бы не рекомендовал этот способ на реальных проектах. Тем не менее этот способ можно использовать для быстрого прототипа.

Обратите внимание: В текущей версии Firefox есть баг — tabindex соответствует визуальному порядку, а не исходному порядку. Вы можете посмотреть тест-кейсы CSS Accessibility Community Group.

4. Модуль комментариев

Use case: У меня есть обычный модуль комментариев, с изображением слева и содержимым справа. Аватар всегда одинаковой нирины и высоты (не адаптивный).

Проблема: Я использую flexbox, но содержимое перекрывает изображение:

Если задать max-width 100% и height auto для изображения, получим следующее:

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

Решение: Добавим свойство display: flex родительскому контейнеру. Вы можете заметить, что содержимое комментария перекрывает аватар (или аватар слишком маленький, как на картинке выше). Чтобы исправить это, добавим к изображению свойство flex-shrink: 0, которое гарантирует, что аватар не будет уменьшаться, подстраиваясь под другие flex-элементы. Альтернативный способ — задать свойство flex: 1 содержимому комментария. В целом, спецификация рекоммедует использовать свойство flex, однако неплохо знать и о свойстве flex-shrink.

5. Комплексное меню

Use case: Меню в моем приложении включает форму поиска и виджет фильтрации. В нем смешаны кнопки, поля ввода, иконки и текст.

Проблема: Я беспокоюсь о том, чтобы лайаут не сломался на разных размерах экрана.

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

Решение: Мы можем использовать flexbox, чтобы задать вертикальное центрирование и сделать блок фильтраии и поиска адаптивным.

6. Карточки

Use case: Я делаю модуль карточек для моего приложения на основе компонента Google. В мобильной версии эти карточки выстраиваются в одну колонку.

Проблема: Я хочу, чтобы на больших экранах карточки располагались в строку. Высота карточек в одной строке должна быть одинаковой, но я не хочу создавать дополнительные обертки для строк. Кнопка «See more» должна всегда располагаться внизу карточки.

Обсуждение: Мы можем рассмотреть дополнительные свойства модуля flexbox, такие так margin: auto, чтобы более разумно управлять интервалом.

Решение: Flexbox предоставляет неверояное решение для древней проблемы CSS: выравнивания высот. На самом деле flexbox является настолько гибким, что позволяет сделать карточки в одной строке одинаковой высоты, при этом каждая строка не будет обернута в дополнительный контейнер. Он также позволяет отобразить кнопку «See all» так, как если бы она была абсолютно спозиционирована по низу относительно карточки с помощью margin: auto.

Заключение

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

Если ваше приложение требует поддержки только современных браузеров, добро пожаловать на борт! Использование инструментов, таких, как Autoprefixer, облегчает переход в мир flexbox, с его многочисленными версиями и разным синтаксисом.

Пока flexbox используется хорошо вместе с float, но он может и заменить его, а также делать другие вещи, которые не могут другие способы расположения блоков, такие как inline-блоки, display: table или абсолютное позиционирование. CSS Gr > предназначен для замены таких хаков, как float, но пока этот стандарт находится на ранней стадии и плохо поддерживается браузерами . Однако я смею мечтать, что в будущем мы будем использовать CSS сетки и flexbox, чтобы создавать интуативны пользовательские интерфейсы.

Это займет некоторое время, пока вы скажете «Ага!» flexbox, потому что вам отвыкать от того, что вы уже знаете о расположении блоков CSS. После того, как вы свободно заговорите на языке CSS, процесс проектирования приложений станет для вас более простым, а таблицы стилей будут выглядеть красивее.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

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

Цукерберг рекомендует:  Java - Java и компеляция
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих