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

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

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

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

flex-wrap

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

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

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

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

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

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

CSS

/* т.е. ... */ .my-flex-block{ flex-direcrion:column; flex-wrap: wrap; } /* это то же самое, что... */ .my-flex-block{ flex-flow: column wrap; }

align-content

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

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

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

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

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

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

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

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

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

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

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

Пример 1 :

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

Пример 2 :

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

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

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

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

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

flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

CSS

/* т.е. ... */ .my-flex-block{ flex-grow:12; flex-shrink:3; flex basis: 30em; } /* это то же самое, что... */ .my-flex-block{ flex: 12 3 30em; }

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

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

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

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

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

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

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

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

HTML

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

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

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

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

My-flex-container { display: flex; height: 300px; /* Или что угодно */ } .my-flex-block { width: 100px; /* Или что угодно */ height: 100px; /* Или что угодно */ margin: auto; /* Магия! Блок отцентрирован по вертикали и горизонтали! */ }

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

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

В заключение

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

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

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

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

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

Если обычный макет основывается на направлениях потоков блочных и инлайн-элементов, то flex-макет основывается на «направлениях flex-потока».

Flexbox

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

main-axis — главная ось, вдоль которого располагаются flex-элементы. Обратите внимание, она обязательно должна быть горизонтальной, все зависит от качества justify-content.
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-контекст для всех его непосредственных потомков.

display: other values ​​| flex | inline-flex;

Имейте в виду:

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

flex-direction

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

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

flex-direction: row | row-reverse | column | column-reverse

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

flex-wrap

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

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

flex-wrap: nowrap | wrap | wrap-reverse

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

flex-flow

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

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

flex-flow < ‘flex-direction’> || < ‘Flex-wrap’>

justify-content

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

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

justify-content: flex-start | flex-end | center | space-between | space-around

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

justify-content
align-items

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

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

align-items: flex-start | flex-end | center | baseline | stretch

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

align-items
align-content

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

align-content: flex-start | flex-end | center | space-between | space-around | stretch

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

align-content
order

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

order 1

flex-grow

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

flex-grow (по умолчанию 0)

flex-shrink

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

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

flex-shrink (default 1)

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

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

flex-basis | auto (default auto)

flex

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

flex: none | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]

align-self

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

align-self: auto | flex-start | flex-end | center | baseline | stretch

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

Parent { display: flex; height: 300px; } .child { width: 100px; / * Або що завгодно * / height: 100px; / * Або що завгодно * / margin: auto; / * Магія! * / }

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

Flex-container {
/ * Сначала создадим flex-контекст * /
display: flex;

/ * Теперь определим направление потока и хотим ли мы, чтобы элементы
переносились на новую строку
* Помните, что это тоже самое, что и:
* Flex-direction: row;
* Flex-wrap: wrap;
* /
flex-flow: row wrap;

/ * Теперь определим, как будет распределяться пространство * /
}

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

/ * Большие экраны * /
.navigation {
display: flex;
flex-flow: row wrap;
/ * Сдвигает элементы к концу строки по главной оси * /
justify-content: flex-end;
}

media all and (max-width: 800px) {
.navigation {
/ * Для экранов среднего размера мы выравниваем навигацию по центру,
равномерно распредляя свободное место между элементами * /
justify-content: space-around;
}
}

/ * Маленькие экраны * /
media all and (max-width: 500px) {
.navigation {
/ * На маленьких экранах вместо строки мы располагаем элементы в столбце * /
flex-direction: column;
}
}

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

Wrapper {
display: flex;
flex-flow: row wrap;
}

/ * Задаем всем Элеметы ширину в 100% * /
.header, .main, .nav, .aside, .footer {
flex 1100%;
}

/ * В этом случае мы полагаемся на исходный порядок для ориентации на
* Мобильные устройства:
* 1 header
* 2 nav
* 3 main
* 4 aside
* 5 footer
* /

/ * Экраны среднего размера * /
media all and (min-width: 600px) {
/ * Оба сайдбара располагаются в одной строке * /
.aside {flex: 1 auto; }
}

/ * Большие экраны * /

На примере формы из реального тестового задания, я покажу вам, как верстать по БЭМ , используя 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;
}

Info__input_short {
width: 320px;
}

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;

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

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

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

не являются по умолчанию флекс элементами и расположены в потоке третьего элемента