Flexbox примеры интерфейсы сайта от начала и до конца


Содержание материала:

Frontender Magazine

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

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

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

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

Основы

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

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

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

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

Свойства

display: flex | inline-flex;

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

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

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

flex-direction

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

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

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

flex-wrap

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

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

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

flex-flow

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

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

justify-content

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

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

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

align-items

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

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

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

align-content

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

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

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

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

order

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

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

flex-grow

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

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

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

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

flex-shrink

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

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

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

flex-basis

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

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

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

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

align-self

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

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

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

Примеры

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

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

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

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

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

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

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

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

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

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

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

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

Пример БЭМ верстки на flexbox

На примере формы из реального тестового задания, я покажу вам, как верстать по БЭМ, используя flexbox. Вы спросите: «Почему обязательно верстать по БЭМ + Flexbox?» Это требование исходит от работодателя. Цитата из ТЗ: «Старайтесь верстать без фреймворков (желательно на flexbox), просто и понятно: избегайте громоздких конструкций и лишнего кода, используйте методологию БЭМ

Фрагмент макета секции с формой

Мои правила верстки

  1. Разделить макет на логические секции
  2. Каждую секцию начинать с тега section
  3. Отделять секции и CSS правили друг от друга, пустой строкой
  4. Каждому тегу присвоить класс
  5. Название класса для блока или элемента, отвечает на вопрос — Что это?
  6. Имя модификатора отвечает на вопрос — Какой?

HTML разметка

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

Личная информация

Что в таком случае делает плохой верстальщик? Он оборачивает строчные элементы в блочные теги div и все нужные свойства задаёт тегу обертке. Дочерние строчные элементы, наследуют эти свойства. А стоит ли городить огород из лишнего кода? Как поступит грамотный верстальщик? Он переопределит строчный элемент в блочный или строчно-блочный, в CSS правилах.

display: block; // для тега input
display: inline-block; // для тега h2

Логика вложенности и названия блоков

Мы видим секцию с личной информацией, так и называем класс секции — info. Секция состоит из трех дочерних элементов:

иконка // название класса info__icon
заголовок // info__title
форма // info__form

Суть в названии классов по БЭМ, состоит в принадлежности дочернего элемента к родителю. Нельзя назвать элемент, icon. Это не просто какая-то иконка, а иконка из секции info.

Дочка и родитель в одном лице

Блок info__form, у нас особенный — он вложен в секцию info, но в тоже время, содержит поля формы. Название этому явлению — многоуровневая вложенность. Блок с формой, несет чисто оберточную функцию для инпутов, чтобы легко можно было задать внешние отступы. Ведь строчные инпуты ведут себя, как дети (кем они и являются), совсем не слушаются. Причем второй инпут, короче всех остальных и отличается только шириной.

Задаем один класс для всех инпутов с одинаковыми свойствами, кроме ширины — info__input. Обычным инпутам, добавим модификатор info__input_long, а короткому инпуту — модификатор info__input_short. Напомню, что модификатор по БЭМ, должен отвечать на вопрос — Какой?

CSS правила для модификаторов

.info__input_long <
width: 520px;
>

CSS код

В HTML разметке создается грубая структура сайта, в CSS, мы уже размещаем элементы, согласно макету. Сегодня, мы не будем касаться внешнего вида, а сосредоточимся на позиционировании элементов. В нашей секции, два флексовых контейнера. Надо сказать, что использование флексов, при расположении всех элементов по одному в строке, очень сомнительно. Единственная получаемая польза — это свойство justify-content, выравнивающее по центру, флекс элементы. Могу сказать в своё оправдание, что, затея с флексами бессмысленная, в контексте только этой секции. Настоящий макет для верстки, обычно имеет больше разнообразия.

.info <
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 77px;
height: 100%;
>

.info__form <
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
margin-top: 50px;
>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

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

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

    Вся документация по свойству flex находится на официальном сайте.

    Для быстрого изучения темы рекомендуем пройти 7-ми дневный марафон Flexbox CSS

    display

    inline-flex
    русский
    english

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

    Применяется ко: всем элементам.

    flex Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели. inline-flex Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

    A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. The overflow property applies to flex containers.

    Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular: If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the ‘Specified Value’ column and flex in the ‘Computed Value’ column.

    Applies to: all elements.

    flex This value causes an element to generate a block-level flex container box. inline-flex This value causes an element to generate an inline-level flex container box.

    flex-direction

    row-reverse
    column
    column-reverse
    русский
    english

    Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

    Применяется к: flex контейнерам.

    row Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево. row-reverse Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо. column Главная ось располагается вертикально и направлена сверху вниз. column-reverse Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

    The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.

    Note: The reverse values do not reverse box ordering: like writing-mode and direction , they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.

    Applies to: flex containers.

    row The flex container’s main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively, of the current writing mode. row-reverse Same as row, except the main-start and main-end directions are swapped. column The flex container’s main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the block-start and block-end directions, respectively, of the current writing mode. column-reverse Same as column, except the main-start and main-end directions are swapped.

    flex-wrap

    nowrap
    wrap-reverse
    русский
    english

    Свойство flex-wrap Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

    Применяется к: flex контейнерам.

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

    nowrap Флексы выстраиваются в одну линию. wrap Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction. wrap-reverse Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

    The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

    For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start. When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

    Applies to: flex containers.

    Initial: nowrap.

    nowrap The flex container is single-line. wrap The flex container is multi-line. wrap-reverse Same as wrap.

    flex-flow

    row nowrap
    column-reverse
    column wrap
    row-reverse wrap-reverse
    русский
    english

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

    Применяется к: flex контейнерам.

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

    The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

    Applies to: flex containers.

    Initial: row nowrap.

    order

    русский
    english

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

    Применяется к: flex элементам.

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

    The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single value, which specifies which ordinal group the flex item belongs to.

    A flex container lays out its content in order-modified document order, starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order , exactly as if the flex items were reordered in the source document.

    Applies to: flex items.

    Initial: 0.

    justify-content

    flex-start
    flex-end
    center
    space-between
    space-around
    space-evenly
    русский
    english

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

    Применяется к: flex контейнерам.

    Значение по умолчанию: flex-start.

    flex-start Флексы прижаты к началу строки. flex-end Флексы прижаты к концу строки. center Флексы выравниваются по центру строки. space-between Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. space-evenly Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.

    The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

    Applies to: flex containers.

    Initial: flex-start.

    flex-start Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item. flex-end Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item. center Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.) space-between Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same. space-around Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items. space-evenly Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between each one is the same.

    align-items

    flex-start
    flex-end
    center
    baseline
    stretch
    русский
    english

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

    Применяется к: flex контейнерам.

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

    flex-start Флексы выравниваются в начале поперечной оси контейнера. flex-end Флексы выравниваются в конце поперечной оси контейнера. center Флексы выравниваются по линии поперечной оси. baseline Флексы выравниваются по их базовой линии. Stretch Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

    Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

    If either of the flex item’s cross-axis margins are align-self has no effect.

    On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

    Applies to: flex containers.

    Initial: stretch.

    flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

    align-self

    flex-start
    flex-end
    center
    baseline
    stretch
    русский
    english

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

    Применяется кo: flex элементам.

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

    flex-start Элемент выравнивается в начале поперечной оси контейнера. flex-end Элемент выравнивается в конце поперечной оси контейнера. center Элемент выравнивается по центральной линии на поперечной оси. baseline Элемент выравнивается по базовой линии текста. Stretch Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

    Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

    If either of the flex item’s cross-axis margins are align-self has no effect.

    On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

    Applies to: flex items.

    Initial: auto.

    flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

    align-content

    flex-start
    flex-end
    center
    space-between
    space-around
    space-evenly
    stretch
    русский
    english

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

    Применяется к: flex контейнеру.

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

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

    The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

    Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

    Applies to: flex containers.

    Initial: stretch.

    flex-start Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line. flex-end Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line. center Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.) space-between Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same. space-around Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines. space-evenly Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between every flex line is the same. stretch Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

    Как работает 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 не выравнивает квадраты по оси, перпендикулярной главной. Главная ось сама меняет свое расположение и теперь направлена сверху вниз.

    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

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

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

    Почему Flexbox?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Подытожим

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

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

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

    В 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.

    Полное визуальное руководство по flexbox

    Раскладка Flexbox, официально названная CSS-модуль раскладки гибких боксов – новый раскладочный модуль в CSS3, созданный для улучшения выравнивания, направления и порядка элементов в контейнере, даже когда их размер неизвестен или меняется динамически. Основная характерная черта flex-контейнера — это способность изменять ширину или высоту своих дочерних элементов, чтобы как можно лучше заполнить доступную область на экранах разной ширины.

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

    Основы

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

    На схеме выше представлены свойства и терминология, которая используется для описания flex-контейнера и его дочерних элементов. Для получения более подробной информации об их значении читайте в официальной спецификациимодели flexbox на W3C.

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

    Браузеры с поддержкой последней спецификации flexbox:

    • Chrome 29+
    • Firefox 28+
    • Internet Explorer 11+
    • Opera 17+
    • Safari 6.1+ (с префиксом -webkit- )
    • Android 4.4+
    • iOS 7.1+ (с префиксом -webkit- )

    Более детальную поддержку и совместимость с браузерами можно посмотреть здесь.

    Применение

    Чтобы запустить механизм flexbox-раскладки, просто установите свойство display для родительского HTML-элемента:

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

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

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

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

    flex-direction

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

    Значения:

    С направлением row flex-элементы укладываются в ряд слева направо в ltr -контексте.

    С направлением row-reverse flex-элементы укладываются в ряд справа налево в ltr -контексте.

    С направлением column flex-элементы укладываются в колонку сверху вниз.

    С направлением column-reverse flex-элементы укладываются в колонку снизу вверх.

    Свойство по умолчанию: row

    Замечание: row и row-reverse зависят от режима письма, поэтому в rtl -контексте они соответственно будут перевёрнуты.

    flex-wrap

    Первоначальная идея flexbox — контейнер для установки его элементов в одну единственную строку. Свойство flex-wrap управляет тем, как flex-контейнер будет выкладывать свои элементы — в одну строку или в несколько, и направлением, в котором будут укладываться новые строки.

    Значения:

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

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

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

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

    Замечание: эти свойства зависят от режима письма, поэтому в rtl -контексте они соответственно будут перевёрнуты.

    flex-flow

    Это свойство – сокращённая запись для свойств flex-direction и flex-wrap .

    Значения:

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

    justify-content

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

    Значения:

    Flex-элементы выравниваются по левой стороне flex-контейнера в контексте ltr .

    Flex-элементы выравниваются по правой стороне flex-контейнера в контексте ltr .

    Flex-элементы выравниваются по центру flex-контейнера.

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

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

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

    align-items

    Flex-элементы могут быть выровнены вдоль поперечной оси текущей строки flex-контейнера, подобно justify-content , но в перпендикулярном направлении. Это свойство устанавливает выравнивание по умолчанию для всех flex-элементов, в том числе и для анонимных flex-элементов.

    Значения:

    Flex-элементы заполняют всю высоту (или ширину) от поперечного начала к поперечному концу flex-контейнера.

    Flex-элементы прижимаются к поперечному началу flex-контейнера.

    Flex-элементы прижимаются к поперечному концу flex-контейнера.

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

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

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

    Замечание: более подробно о том, как высчитывается базовая линия, можно почитать здесь.

    align-content

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

    Значения:

    Flex-элементы отображаются с распределённым пространством после каждого ряда flex-элементов.

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

    Ряды flex-элементы прижаты к поперечному началу flex-контейнера.

    Ряды flex-элементы прижаты к поперечному концу flex-контейнера.

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

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

    Flex-элементы отображаются с равным интервалом вокруг каждого ряда flex-элементов.

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

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

    Замечания для flex-контейнеров

    • любые свойства column -* не влияют на flex-контейнер.
    • псевдоэлементы :: first-line and :: first-letter не применяются к flex-контейнеру.

    Свойства flexbox для элемента

    order

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

    Значения:

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

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

    flex-grow

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

    Значения:

    Если всем flex-элементам задано одно и тоже значение flex — grow , тогда все элементы в контейнере будут одинакового размера.

    Второй flex-элемент занимает больше места относительно размера других flex-элементов.

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

    Замечание: отрицательные значения игнорируются.

    flex-shrink

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

    Значения:

    По умолчанию любые flex-элементы могут быть сужены, но если мы установим значение flex-shrink в 0 (не сужаются), то они сохранят первоначальный размер.

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

    Замечание: отрицательные значения игнорируются.

    flex-basis

    Это свойство принимает те же самые значения, что width and height , и указывает исходный главный размер flex-элемента, прежде чем свободное пространство распределится в соответствии с факторами гибкости.

    Значения:

    flex — basis указывается для 4-го flex-элемента и диктует его исходный размер.

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

    Замечание: есть проблема именования со значением auto , которая будет решена в будущем.

    Прим. перев. в текущем редакторском черновике предлагается решить проблему с помощью введения дополнительного значения content: c этим значением базовый главный размер будет определяться по содержимому, а со значением auto — по значению свойства главного размера (width или height в зависимости от flex-direction)

    Это свойство – сокращённая запись для свойств flex-grow , flex-shrink и flex-basis . Наряду с другими значениями, его можно установить также в auto ( 1 1 auto ) и none ( 0 0 auto ).

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

    Замечание: W3C рекомендует использовать сокращённую запись вместо раздельных свойств компонентов, поскольку сокращённая запись правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.

    align-self

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

    Значения:

    Для 3-го и 4-го элемента переопределено выравнивание при помощи свойства align — self .

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

    Замечание: значение auto для align-self вычисляется как значение align-items родительского элемента, либо stretch , если родительского элемента нет.

    Замечания для flex-элементов

    • float , clear и vertical-align не влияют на flex-элемент и не вырывают его из потока.

    Игровая площадка с Flexbox

    Здесь представлена площадка для игр с flexbox, где можно поиграть с различными flex-свойствами и изучить силу раскладки flexbox. Комбинируйте некоторые flex-свойства, чтобы получить сложные раскладки.

    See the Pen yNNZxr by Ilya Streltsyn (@SelenIT) on CodePen.

    Флексбокс для интерфейсов: основные паттерны

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

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

    Гибкие атомарные компоненты

    В интерфейсе Tracks реализован подход, рассматривающий каждый фрагмент изолированно на основе принципов Брэда Фроста.

    Философию атомарного дизайна можно рассматривать как аналог ЛЕГО-блоков для веб-дизайна. Научные термины такие как организм, молекула, атом используются для того, чтобы дать разработчикам классификацию элементов интерфейса и, соответственно, более глубокое понимание каждого фрагмента как части целого. Этот способ категоризации создает возможность для идентификации этих паттернов и предотвращает влияние на этот процесс внешних факторов, таких как сетки, цвета и расстояния. Построение интерфейса с микроуровня дает возможность более широкого многократного использования его базовых микроэлементов.

    Иллюстрация 1. Эти элементы приложения используются для вывода данных на основе принципов атомарного дизайна. Можете ли вы угадать, в каких из них используется Флексбокс? (увеличенная версия)

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

    Иллюстрация 2. Основной интерфейс приложения Tracks, использующий преимущества флексбокса и атомарного дизайна. (увеличенная версия)

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

    Одним из важных аспектов редизайна Tracks были требования о поддержке только современных браузеров, то есть Internet Explorer (IE) 10+, Android 4.1+ and iOS 7+, это позволяло внедрить флексбокс, хоть и с использованием префиксов. Что может быть запасным вариантом, если флексбокс не поддерживается? Можно использовать Modernizr и делать раскладку в не поддерживающих флексбокс браузерах традиционными способами, применяя их к сгенерированному классу .no-flexbox (также можно использовать запросы CSS с помощью @suppports). Например:

    Там где поддержка флексбокса отсутствует, мы будем использовать display: inline-block . К этой же декларации мы добавим класс no-js , на случай отключения в браузере JavaScript. Каскад CSS будет работать даже там, где нет ни флексбокса, ни JavaScript, а также при проблемах с загрузкой. Флексбокс может сосуществовать с float , display: table и position: relative ; браузеры, поддерживающие флексбокс использует его в приоритетном порядке, а браузеры его не поддерживающие ограничатся традиционными механизмами раскладки CSS.

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

    Строчные паттерны

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

    Иллюстрация 3. Эта навигация административной панели использует строчный паттерн с вертикальным центрированием элементов навигации. (увеличенная версия)

    Разметка паттерна навигации административной панели состоит из тега nav , оборачивающего ссылки. Вот HTML этого паттерна:

    И соответствующие стили:

    CSS получился такой же минималистичный, как и разметка. Обратите внимание на inline-block , заданный для навигационных ссылок. Эта декларация решает любые возможные будущие проблемы в IE10, в случае, если вы решите поменять последовательность элементов со свойством order . Также мы знаем, что все внешние и внутренние отступы, заданные прямым потомкам флекс-контейнера вызывают проблемы с раскладкой в IE10, во избежание таких вещей имеет смысл всегда кроссбраузерно проверять верстку.

    Иллюстрация 4. Паттерн навигации в шапке сайта с центрированным лого часто встречается в вебе и легко адаптируется к флексбоксу. (увеличенная версия)

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

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

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

    До появления флексбокса разработчики использовали подходы display: inline-block и даже float: left , чтобы организовать строчную раскладку. Теперь флексбокс стал жизнеспособным вариантом и разработчиков ничто не вынуждает использовать плохие практики ради красивого дизайна. Требуемый CSS не столь краток, как в предыдущем примере с паттерном на иллюстрации 3, но он проще в реализации, чем старые методы.

    При использования флексбокса в паттерне с иллюстрации 3, помните, что последовательность в разметке может быть изменена. Если логотип требуется сдвинуть, это легко делается с помощью свойства order . Учитывайте, что порядок в разметке важен для доступности и это вызывает противоречия, когда дело доходит до флексбокса, особенно с учетом различной реализации доступности в браузерах. Браузеры (кроме Firefox) и скринридеры используют для навигации с клавиатуры порядок разметки, а не визуальный порядок, созданный средствами CSS.

    Иллюстрация 5. Поток, представленный в разметке и его рендеринг в браузере, изменение последовательности с помощью флексбокса без изменений разметки. (увеличенная версия)

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

    Здесь CSS используется для изменения порядка вывода элементов диаграмме справа иллюстрации 5.

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

    Иллюстрация 6. Тот же паттерн, который мы применяли для навигации, используется в футере. (увеличенная версия)

    При использовании этого паттерна учитывайте, что контенту может не хватить пространства в контейнере. Должен ли контент распространяться от центра к краям? Как это повлияет на остальные элементы раскладки? Думайте об этих вопросах до того, как к приступать к реализации проекта. И учитывайте, что навигация с клавиатуры важна для пользователей.

    Строчные поля ввода

    Формы могут быть кошмаром для разработчиков, особенно когда они тесно связаны с замысловатой структурой сетки, сделанной в Photoshop. Паттерн “inline label”, как я его называю, также важен для нашей индустрии как Fender Stratocaster для рок-музыки.

    Иллюстрация 7. Строчные лейблы и поля ввода это еще одна область использования флексбокса. Но будьте осторожны с тем, как текст лейбла отталкивает поле ввода в зависимости от количества текста. (увеличенная версия)

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

    Иллюстрация 8. Решайте, как ваш контент будет расширяться. Слева display:table с вертикальным выравниванием по середине, справа флексбокс с выравниванием по центру. (увеличенная версия)

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

    Вот разметка для паттерна строчного лейбла на иллюстрации 8.

    Решением проблемы будет использование display: table; для длинного текста. Это позволяет контенту идти сверху вниз, а не от центра к краям.

    Сочетание флексбокса и display: table это отличная техника, которую имеет смысл изучить глубже. Но при ее использовании важно всегда проверять раскладку в тестовом окружении, чтобы своевременно выявлять баги.

    Иллюстрация 9. При использовании полей ввода и кнопок на одной строке, баланс в дизайне создается за счет их равной высоты. (увеличенная версия)

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

    Необходимый HTML типичен и включает див-обертку для структуры флексбокса.

    Выпадающее меню

    Иллюстрация 10. Участок страницы с выпадающим меню выделен при помощи возможностей флексбокс для быстрого позиционирования. (увеличенная версия)

    Выпадающее меню состоит из колонки слева, содержащей вертикально центрированные строчные элементы, и списка элементов справа, в котором каждый элемент расположен на своей строке.

    Иллюстрация 11. Меню основного интерфейса построено с использованием флексбокса для раскладки. (увеличенная версия)

    Разметка для этой навигационного меню использует следующий HTML в качестве основы.

    Соответствующий ему CSS прост и понятен, все, как любят разработчики.

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

    Медиа-объекты

    Иллюстрация 12. В паттерне медиа-объект используется флексбокс, SVG фиксированной ширины располагается слева, а все остальное содержимое флексбокса располагается рядом. (увеличенная версия)

    В этом универсальном паттерне, известном как “медиа-объект”, изображение или видео располагается на одной стороне, а остальное содержимое рядом.

    Филип Уолтон поделился отличным подходом на своем сайте “Решения с флексбоксом” (я рекомендую всем изучить этот сайт). Филип дает несколько полезных напоминаний и советов по реализации определенных паттернов с флексбоксом, а также поддерживает репозиторий со всеми представленными на сайте паттернами.

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

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

    Решением для этого паттерна будет задание изображениям max-width: 100% для медиа внутри флексбокса или использование фиксированной ширины изображений и медиа-запросов для их регулировки при необходимости.

    Календарь на флексбоксе

    Календарь это один из самых распространенных виджетов. Вы спросите, а почему бы не использовать таблицу? В нашем случае календарь используется для простого выбора дат, поэтому я решил использовать кнопки для дней, месяцев и годов и ограничить эти кнопки рамками рядов (каждый ряд календаря на неделю обернут отдельным div ). Использование этого подхода позволяет уменьшить количество разметки и облегчить создание раскладки (огромная благодарность Шэйну Хадсону за построение логики и предоставление идеи).

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

    Этот CSS не может быть меньше, он достаточно краток для написания и осмыслен для чтения.

    Иллюстрация 14. Это календарь с выбором месяца, слева использовано justify-content: space-between , а справа justify-content: flex-start , слева на один элемент-обертку больше. (увеличенная версия)

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

    Раскладка

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

    Иллюстрация 15. Боковая колонка влево и основной контент вправо — это совершенный сценарий для флексбокса. Это также напоминает технику искусственных колонок. (увеличенная версия)

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

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

    Вот отличный запасной вариант для паттерна раскладки с иллюстрации 14. Паттерн не требует сложной сеточной структуры. А наш старый друг display: table всегда готов помочь при необходимости.

    display: table-cell это мощная CSS декларация, появившаяся еще в CSS2 и прекрасно работающая в качестве запасного варианта в данном контексте. Это правило вынуждает элемент вести себя как ячейка таблицы и это поведение является наиболее близкой заменой флексбокса. Также можно изменить порядок вывода, используя приемы табличной верстки с декларациями display: table-header-group и display: table-footer-group .

    Приклеенные футеры

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

    Иллюстрация 16. Приклеенный футер в правой боковой колонке. (увеличенная версия)

    Вот разметка правой боковой колонки:

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

    Иллюстрация 17. Приклеенный футер с флексбоксом и запасным вариантом в виде display: table-row; . Работает во всех браузерах вплоть до IE6.

    Еще одной частью раскладки, где стоит внедрить флексбокс является основной вид приложения, так называемый “трубопровод”. У каждой карты задана фиксированная ширина и свойство flex . Это дает всем картам последовательные и четкие пропорции.

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

    Будьте осторожны

    При тестировании верстки в браузере мы заметили, что сочетание свойства flex со свойствами, задающими отступы, ломает раскладку в IE10. (см. пример 18)

    Когда обертке модуля задан display: flex , а дочерние элементы, используют свойство flex вместе с padding или margin , раскладка ломается в IE 10.

    Запрос @supports (display: flex) <> это нативная имплементация modernizr. К сожалению, поддержка @supports на данный момент невелика и рассчитывать на него не стоит, вместо этого есть другие запасные варианты:

    • Modernizr для детектирования поддержки флексбокса и генерируемый им класс no-flexbox .
    • Для центрирования используйте transform или display: table .
    • display: table это основной запасной вариант.
    • Управляйте порядком на основе разновидностей табличного представления table-caption , table-header-group и table-footer-group .
    • Используйте флоаты в качестве запасного варианта для основной раскладки страницы.
    • Используйте display: inline и display: inline-block в качестве запасного варианта в строчных паттернах.
    • Используйте условные комментарии для замены флексбокса в IE9-.

    Йэн Девлин написал отличную статью о техниках раскладки с табличным отображением. Он дал отличный обзор контроля раскладки с помощью table-caption , table-header-group и table-footer-group .

    Полное руководство по 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-элемента, в зависимости направления поперечной оси;
    Топ-пост этого месяца:  Все необходимое для вебмастеров
    Добавить комментарий