Display flex css описание: наглядное введение в систему компоновки элементов на веб-странице

Исследование CSS-свойства flex / Блог компании RUVDS.com / Хабр

Вам когда-нибудь было интересно узнать о том, как работает сокращённое CSS-свойство flex? Оно позволяет задавать значения свойств flex-grow, flex-shrink и flex-basis. Я обратил внимание на то, что данное свойство чаще всего используют в виде flex: 1, что позволяет flex-элементу растягиваться, занимая доступное пространство.

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

Свойство flex-grow

CSS-свойство flex-grow используется для настройки так называемого «коэффициента роста» элементов (flex grow factor), что позволяет этим элементам растягиваться, занимая доступное пространство. В качестве значений этого свойства можно использовать только целые числа. Рассмотрим пример.

Вот HTML-разметка:

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Вот стили:

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex-grow: 1;
}

Свойство flex-grow может воздействовать на ширину или на высоту элемента, что зависит от значения свойства flex-direction. Рассматривая следующие примеры, учитывайте то, что используемое в них свойство flex-direction установлено в значение, задаваемое по умолчанию (row). Если это будет не так — я об этом скажу.

Обратите внимание на то, что без использования flex-grow ширина flex-элементов будет установлена в значение, применяемое по умолчанию, то есть — она будет равна их исходной ширине. А если используется flex-grow: 1, то доступное свободное пространство распределяется между элементами.

Вверху свойство flex-grow не применяется. Внизу применяется flex-grow: 1

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

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

Свойство flex-grow не используется

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

Давайте посчитаем ширину первого элемента — того, в котором находится текст CSS.

Нахождение ширины элемента

Итак, тут используется такая формула:

Ширина элемента = ((flex-grow элемента / сумма значений flex-grow) * доступное пространство) + исходная ширина элемента

Разберём эту формулу:

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

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

Ширина элемента = ( (1 / 3) * 498) + 77 = 241

Разные значения flex-grow, задаваемые для разных элементов

В предыдущем примере для всех flex-элементов использовалось одно и то же значение flex-grow. Попробуем теперь назначить первому элементу свойство flex-grow: 2. Как будет вычисляться ширина элементов теперь? Рассматривая следующую формулу, помните о том, что ширина свободного пространства в нашем примере равняется 498px.
Нахождение ширины элемента в ситуации, когда разным элементам заданы разные значения flex-grow

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

Можно ли использовать 0 в качестве значения flex-grow?

Конечно можно! Так как свойство flex-grow принимает целочисленные значения, в него можно записать и 0. Это будет означать, что мы не хотим, чтобы flex-элемент менял бы размеры, занимая некоторую часть свободного пространства контейнера.
Последствия установки свойства flex-grow в значение 0

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

Использование flex-grow не приводит к тому, что элементы становятся одинаковыми

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

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

Свойство flex-shrink

Свойство flex-shrink позволяет задать так называемый «коэффициент сжатия» элемента (flex shrink factor). Если размер всех flex-элементов больше, чем размер их контейнера, размер элементов будет уменьшен в соответствии с назначенными им значениями свойства flex-shrink.
Центральному элементу назначено свойство flex-shrink: 1

Вот стили к этому примеру:

.item-2 {
    width: 300px;
    flex-shrink: 1;
}

Браузер сделает ширину элемента item-2 равной 300px при выполнении следующих условий:

• Общая ширина всех элементов меньше ширины контейнера.
• Ширина области просмотра страницы равна или больше ширины элемента.

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

Как видите, элемент не сжимается, сохраняя ширину в 300px до тех пор, пока ему хватает места.

Свойство flex-basis

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

Свойство flex-basis принимает те же значения, которые могут принимать свойства width и height. Значением, задаваемым по умолчанию, является auto, которое устанавливается на основе значения content. Значение content задаётся автоматически, на основе размера содержимого flex-элемента.

Применим к элементу item-1 из нашего примера следующие стили:

.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
}

Использование свойства flex-basis: 50%

Здесь первому элементу назначено свойство flex-basis: 50%. При этом тут важно сбросить в 0 свойство flex-grow, что позволит сделать так, чтобы размер элемента не превысил бы 50%.

Что произойдёт, если вместо этого записать в свойство flex-basis значение 100%? Это приведёт к тому, что элемент займёт 100% ширины родительского элемента, а другие элементы будут перенесены на новую строку.

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

.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;
}

Результат использования свойства flex-basis: 100%;

Сокращённое свойство flex

Свойство flex позволяет, в сокращённом формате, задавать значения свойств flex-grow, flex-shrink и flex-basis. Значением по умолчанию, которое принимает это свойство, является auto. Оно соответствует flex: 0 1 auto. Это означает, что оно позволяет flex-элементам увеличиваться в размерах, основываясь на размерах их содержимого.

В данном контексте мне хотелось бы обратить ваше внимание на одну важную деталь. Речь идёт о flex-элементах с абсолютными и относительными размерами. И, кстати, это не имеет отношения к CSS-позиционированию. Это относится к модели flexbox.

Flex-элементы с относительными размерами

Вот CSS-код:

.item {
    /* Значение, используемое по умолчанию, эквивалентно flex: 1 1 auto */
    flex: auto;
}

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

Flex-элементы с абсолютными размерами

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

Вот стиль:

.item {
    /* Аналогично flex: 1 1 0% */
    flex: 1;
}

Элементы имеют одинаковый размер

Особенности свойства flex, которые мне нравятся

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

▍Одно значение без единиц измерения

Вот CSS-код:

.item {
    flex: 1;
}

Здесь в свойство flex записывается единственное значение без единиц измерения. Это значение будет воспринято системой как значение свойства flex-grow. Его эквивалент будет выглядеть как flex: 1 1 0.

▍Два значения без единиц измерения

Взглянем на следующий стиль:

.item {
    flex: 1 1;
}

Тут мы в явном виде задаём, соответственно, значения flex-grow и flex-shrink. При этом flex-basis будет сброшено в значение, применяемое по умолчанию.

▍Одно значение, представляющее собой некий размер

Поговорим о том, как будет «расшифрован» следующий стиль:

.item {
    flex: 100px;
    /* flex: 1 1 100px */
}

Значение 100px будет рассматриваться системой как значение flex-basis. А во flex-grow и flex-shrink будет, по умолчанию, записано 1.

▍Использование значения 0 без указания единиц измерения

Предположим, нужно установить flex-basis в значение 0, воспользовавшись свойством flex. Мы, для решения этой задачи, решим поступить так:

.item {
    flex: 0;
}

Делать так не рекомендуется, так как это способно запутать и тех, кто будет читать подобный код, и браузер. Как понять — к чему именно относится этот 0? К свойству flex-grow, flex-shrink или flex-basis? В общем — путаница получается. Вот что говорится об этом в спецификации CSS:

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

То есть, чтобы избежать неоднозначностей, вышеприведённый код стоит переписать так:

.item {
    flex: 0%;
    /* flex: 1 1 0% */
}

Здесь используется конструкция 0%, но можно, например, воспользоваться и конструкцией 0px.

Пользуйтесь сокращённым свойством flex

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

Заглянем в спецификацию CSS:

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

Сценарии использования и практические примеры

▍Аватары пользователей

Аватар, при настройке которого использовано свойство flex

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

Вот разметка:

<div>
    <img src="shadeed.jpg" alt="" />
    <div>
        <h4>Ahmad Shadeed</h4>
        <p>Author of Debugging CSS</p>
    </div>
</div>

Вот стиль:

.user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.user__avatar {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
}

Обратите внимание на то, что, настраивая элемент user__avatar, я применил свойство flex: 0 0 70px. Это важно, так как без этой настройки в некоторых устаревших браузерах изображение может вывестись неправильно. Более того, приоритет свойства flex выше приоритета свойства width (если речь идёт о ситуации, в которой применяется flex-direction: row) и свойства height (в ситуации, когда применяется flex-direction: column).

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

.user__avatar {
    /* Ширина будет 100px, а не 70px */
    flex: 0 0 100px;
    width: 70px;
    height: 70px;
}

▍Заголовок элемента

Заголовок элемента

Предположим, нам надо оформить заголовок некоего элемента. Этот заголовок должен занять всё доступное ему пространство. Решить эту задачу можно с помощью свойства flex: 1:

.page-header {
    display: flex;
    flex-wrap: wrap;
}

.page-header__title {
    flex: 1;
}

▍Поле ввода для подготовки сообщения

Поле ввода

Подобные поля часто встречаются в приложениях для обмена сообщениями, вроде тех, что есть в Facebook и Twitter. Такое поле должно занимать всё доступное ему пространство. При этом кнопка для отправки сообщения должна иметь фиксированную ширину. Вот как это выглядит в CSS:

form {
    display: flex;
    flex-wrap: wrap;
}

input {
    flex: 1;
    /* Другие стили */
}

Этот пример являет собой удачную демонстрацию использования свойства flex-grow.

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

▍Выравнивание нижних элементов, находящихся на разных карточках

Цель — выровнять обе даты по красной линии

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

Для решения этой задачи можно воспользоваться моделью flexbox.

Вот разметка:

<div>
    <img src="thumb.jpg" alt="">
    <h4>Title short</h4>
    <time></time>
</div>

Достичь нашей цели можно, воспользовавшись свойством flex-direction: column. Элемент card__title, заголовок, можно стилизовать, применив свойство flex-grow и сделав так, чтобы он занимал бы всё доступное ему пространство. В результате окажется, что строка с датой попадёт в нижнюю часть карточки. Так произойдёт даже в том случае, если сам заголовок окажется достаточно коротким.

Вот стили:

.card {
    display: flex;
    flex-direction: column;
}

/* Первое решение */
.card__title {
    flex-grow: 1;
}

Решить эту задачу можно и не прибегая к свойству flex-grow. А именно, речь идёт о применении модели flexbox и механизма автоматической настройки внешних отступов с использованием ключевого слова auto. Я, кстати, написал об этом подробную статью.

/* Второе решение */
.card__date {
    margin-top: auto;
}

Использование разных значений для коэффициентов гибкости

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

▍Панели управления

Набор элементов управления

На подготовку этого примера меня вдохновил дизайн Facebook (значки я тоже взял оттуда). На панели управления (элемент actions в следующем коде) имеется четыре элемента. Последний (элемент actions__item.user) имеет ширину, которая меньше, чем ширина других элементов. Сформировать подобную панель управления можно так:

.actions {
    display: flex;
    flex-wrap: wrap;
}

.actions__item {
    flex: 2;
}

.actions__item.user {
    flex: 1;
}

▍Анимация, в ходе которой элемент растягивается

Элемент растягивается при наведении на него указателя мыши

Flex-элементы можно анимировать при наведении на них указателя мыши. Этот приём может оказаться крайне полезным. Вот соответствующий CSS-код:

.palette {
    display: flex;
    flex-wrap: wrap;
}

.palette__item {
    flex: 1;
    transition: flex 0.3s ease-out;
}

.palette__item:hover {
    flex: 4;
}

Здесь можно найти видео, демонстрирующее всё это в действии.

▍Увеличение размера активной карточки

Мне очень нравится этот проект на CodePen, в котором реализован механизм увеличения размеров карточки с описанием тарифного плана, по которой щёлкнул пользователь. Размер карточки меняется благодаря установке её свойства flex-grow в значение 4.
Увеличение размера активной карточки

▍Что делать, если содержимое контейнера больше самого контейнера?

Элементы не помещаются в контейнер

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

Попробуем такой стиль:

.wrapper {
    display: flex;
}

.wrapper img {
    flex: 1;
}

Но даже при использовании свойства flex: 1 изображения в контейнер не помещаются. Обратимся к спецификации CSS:

Flex-элементы, по умолчанию, не уменьшаются в размерах до величин, меньших, чем размеры их содержимого (длина самого длинного слова или элемента с фиксированным размером). Для того чтобы это изменить, нужно воспользоваться свойствами min-width или min-height.

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

.wrapper img {
    flex: 1;
    min-width: 0;
}

Подробности смотрите в этой моей статье.

Итоги

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

Пользуетесь ли вы CSS-свойством flex в своих проектах?

Шпаргалка по Flexbox CSS | Типичный верстальщик

Свойство 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.

Визуальное руководство по свойствам Flexbox из CSS3 — CSS-LIVE

Перевод статьи A Visual Guide to CSS3 Flexbox Properties с сайта scotch.io, c разрешения автора— Димитара Стоянова.

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

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

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

Основы

Прежде чем начать описание свойств 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-container {

 display: -webkit-flex; /* Safari */

 display: flex;

}

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

.flex-container {

 display: -webkit-inline-flex; /* Safari */

 display: inline-flex;

}

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

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

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

flex-direction

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

Значения:

.flex-container {

 -webkit-flex-direction: row; /* Safari */

 flex-direction: row;

}

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

.flex-container {

 -webkit-flex-direction: row-reverse; /* Safari */

 flex-direction: row-reverse;

}

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

.flex-container {

 -webkit-flex-direction: column; /* Safari */

flex-direction: column;

}

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

.flex-container {

 -webkit-flex-direction: column-reverse; /* Safari */

 flex-direction: column-reverse;

}

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

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

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

flex-wrap

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

Значения:

.flex-container {

 -webkit-flex-wrap: nowrap; /* Safari */

 flex-wrap: nowrap;

}

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

.flex-container {

 -webkit-flex-wrap: wrap; /* Safari */

 flex-wrap: wrap;

}

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

.flex-container {

 -webkit-flex-wrap: wrap-reverse; /* Safari */

 flex-wrap: wrap-reverse;

}

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

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

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

flex-flow

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

Значения:

.flex-container {

 -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */

 flex-flow: <flex-direction> || <flex-wrap>;

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

justify-content

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

Значения:

.flex-container {

 -webkit-justify-content: flex-start; /* Safari */

 justify-content: flex-start;

}

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

.flex-container {

 -webkit-justify-content: flex-end; /* Safari */

 justify-content: flex-end;

}

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

.flex-container {

 -webkit-justify-content: center; /* Safari */

 justify-content: center;

}

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

.flex-container {

 -webkit-justify-content: space-between; /* Safari */

 justify-content: space-between;

}

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

.flex-container {

 -webkit-justify-content: space-around; /* Safari */

 justify-content: space-around;

}

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

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

align-items

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

Значения:

.flex-container {

 -webkit-align-items: stretch; /* Safari */

 align-items: stretch;

}

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

.flex-container {

 -webkit-align-items: flex-start; /* Safari */

 align-items: flex-start;

}

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

.flex-container {

 -webkit-align-items: flex-end; /* Safari */

 align-items: flex-end;

}

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

.flex-container {

 -webkit-align-items: center; /* Safari */

 align-items: center;

}

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

.flex-container {

 -webkit-align-items: baseline; /* Safari */

 align-items: baseline;

}

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

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

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

align-content

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

Значения:

.flex-container {

 -webkit-align-content: stretch; /* Safari */

 align-content: stretch;

}

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

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

.flex-container {

 -webkit-align-content: flex-start; /* Safari */

 align-content: flex-start;

}

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

.flex-container {

 -webkit-align-content: flex-end; /* Safari */

 align-content: flex-end;

}

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

.flex-container {

 -webkit-align-content: center; /* Safari */

 align-content: center;

}

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

.flex-container {

 -webkit-align-content: space-between; /* Safari */

 align-content: space-between;

}

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

.flex-container {

 -webkit-align-content: space-around; /* Safari */

 align-content: space-around;

}

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

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

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

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

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

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

order

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

Значения:

.flex-item {

 -webkit-order: <целое число>; /* Safari */

 order: <целое число>;

}

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

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

flex-grow

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

Значения:

.flex-item {

 -webkit-flex-grow: <число>; /* Safari */

 flex-grow: <число>;

}

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

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

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

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

flex-shrink

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

Значения:

.flex-item {

 -webkit-flex-shrink: <число>; /* Safari */

 flex-shrink: <число>;

}

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

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

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

flex-basis

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

Значения:

.flex-item {

 -webkit-flex-basis: auto | <ширина>; /* Safari */

 flex-basis: auto | <ширина>;

}

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

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

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

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

flex

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

.flex-item {

 -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */

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

}

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

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

align-self

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

Значения:

.flex-item {

 -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */

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

}

Для 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.

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

P.S. Это тоже может быть интересно:

Свойство flex | CSS справочник

CSS свойства

Определение и применение

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

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

CSS синтаксис:

flex:"flex-grow flex-shrink flex-basis | auto | none | initial | inherit";

Если указывается одно числовое значение оно устанавливается для flex-grow,
если указаны единицы измерения CSS, то для flex-basis

Если второе значение соответствует числовому значению, то оно устанавливается для flex-shrink,
если указаны единицы измерения CSS, то для flex-basis и т.п.

JavaScript синтаксис:

object.style.flex = "0 1 auto"

Значения свойства

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

Рассмотрим пример увеличения флекс элементов в CSS, используя свойство flex:

<!DOCTYPE html>
<html>
<head>
<title>Увеличение флекс элементов в CSS</title>
<style> 
.container {
width: 100%; /* устанавливаем ширину блока */
height: 100px;  /* устанавливаем высоту блока */
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
color: white;  /* устанавливаем цвет шрифта */
} 
.container div:nth-of-type(1) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем первый <div> в контейнере)
-webkit-flex: 1;  /* для поддержки ранних версий браузеров */
flex: 1;  /* число, которое указывает, на сколько будет увеличен блок по отношению к остальным флекс элементам */
background: orange;  /* устанавливаем цвет заднего фона */
} 
.container div:nth-of-type(2) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем второй <div> в контейнере)
-webkit-flex: 3;  /* для поддержки ранних версий браузеров */
flex: 3;  /* число, которое указывает, на сколько будет увеличен блок по отношению к остальным флекс элементам */
background: brown;  /* устанавливаем цвет заднего фона */
}
.container div:nth-of-type(3) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем третий <div> в контейнере)
-webkit-flex: 1;  /* для поддержки ранних версий браузеров */
flex: 1;  /* число, которое указывает, на сколько будет увеличен блок по отношению к остальным флекс элементам */
background: tan;  /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "container">
			<div>1</div>
			<div>3</div>
			<div>1</div>
		</div>
	</body>
</html>

Пример использования CSS свойства flex(увеличение флекс элементов в CSS).

Рассмотрим пример уменьшения флекс элементов в CSS, используя свойство flex:

<!DOCTYPE html>
<html>
<head>
<title>Уменьшение флекс элементов в CSS</title>
<style> 
.container {
width: 250px; /* устанавливаем ширину блока */
height: 100px;  /* устанавливаем высоту блока */
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
color: white;  /* устанавливаем цвет шрифта */
 /* устанавливаем два свойства для возможности масштабировать контейнер по горизонтали (изменять ширину): */
overflow: auto;  /* указываем, что при переполнении содержимое отображается (автоматический режим) */
resize: horizontal;  /* пользователь может изменять ширину элемента */
} 
.container div:nth-of-type(1) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем первый <div> в контейнере)
 -webkit-flex: 0 1 150px;  /* для поддержки ранних версий браузеров */
flex: 0 1 150px;  /* блоки по отношению к другим не увеличиваем(значение 0), указываем, что блок при недостатке места будет уменьшен по умолчанию(1), определяем начальную ширину флекс элемента (приведет сразу к уменьшению второго блока, т.к. ширина контейнера 250px)  */
background: orange;  /* устанавливаем цвет заднего фона */
} 
.container div:nth-of-type(2) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем второй <div> в контейнере)
-webkit-flex: 0 3 150px;  /* для поддержки ранних версий браузеров */
flex: 0 3 150px;  /* блоки по отношению к другим не увеличиваем(значение 0), указываем, что блок при недостатке места будет уменьшен по отношению к другим на 3, определяем начальную ширину флекс элемента (приведет сразу к уменьшению второго блока, т.к. ширина контейнера 250px)  */
background: brown;  /* устанавливаем цвет заднего фона */
}
.container div:nth-of-type(3) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем третий <div> в контейнере)
-webkit-flex: 0 1 150px;  /* для поддержки ранних версий браузеров */
flex: 0 1 150px;  /* блоки по отношению к другим не увеличиваем(значение 0), указываем, что блок при недостатке места будет уменьшен по умолчанию(1), определяем начальную ширину флекс элемента (приведет сразу к уменьшению второго блока, т.к. ширина контейнера 250px)  */
background: tan;  /* устанавливаем цвет заднего фона */
}
</style>
</head>
<body>
	<div class = "container">
		<div>1</div>
		<div>3</div>
		<div>1</div>
	</div>
</body>
</html>

Пример использования CSS свойства flex(уменьшение флекс элементов в CSS).

Рассмотрим пример, где мы укажем значение ширины флекс элемента по умолчанию, используя при этом единицы измерения CSS и в автоматическом режиме, используя свойство flex:

<!DOCTYPE html>
<html>
<head>
<title>Размер флекс элементов по умолчанию в CSS</title>
<style> 
.container {
width: 250px; /* устанавливаем ширину блока */
height: 100px;  /* устанавливаем высоту блока */
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
color: white;  /* устанавливаем цвет шрифта */
 /* устанавливаем два свойства для возможности масштабировать контейнер по горизонтали (изменять ширину): */
overflow: auto;  /* указываем, что при переполнении содержимое отображается (автоматический режим) */
resize: horizontal;  /* пользователь может изменять ширину элемента */
} 
.container div:nth-of-type(1) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем первый <div> в контейнере)
-webkit-flex: 0 1 auto;  /* для поддержки ранних версий браузеров */
flex: 0 1 auto;  /* для элемента задано значение по умолчанию (ширина элемента расчитывается по содержимомку) */
background: orange;  /* устанавливаем цвет заднего фона */
} 
.container div:nth-of-type(2) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем второй <div> в контейнере)
-webkit-flex: 0 1 150px;  /* для поддержки ранних версий браузеров */
flex: 0 1 150px;  /* элемент не увеличиваем и не уменьшаем по отношению к другим, но значение ширины по умолчанию устанавливаем равной 150px */
background: brown;  /* устанавливаем цвет заднего фона */
}
.container div:nth-of-type(3) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем третий <div> в контейнере)
-webkit-flex: 0 1 auto;  /* для поддержки ранних версий браузеров */
flex: 0 1 auto;  /* для элемента задано значение по умолчанию (ширина элемента расчитывается по содержимомку) */
background: tan;  /* устанавливаем цвет заднего фона */
}
</style>
</head>
<body>
	<div class = "container">
		<div>auto</div>
		<div>150px</div>
		<div>auto</div>
	</div>
</body>
</html>

Пример использования CSS свойства flex(размер флекс элементов по умолчанию в CSS).CSS свойства

Flexbox — Изучение веб-разработки | MDN

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

Почему Flexbox?

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

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

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

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

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

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

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

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

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

section {
  display: 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 ( <section> в нашем примере) называется flex container.
• Элементы, размещённые в нём как Flex блоки называются flex items (в нашем примере это <article> ).

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

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

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

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

flex-direction: column

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

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

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

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

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

flex-wrap: wrap

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

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

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

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

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

flex-direction: row;
flex-wrap: wrap;

на

flex-flow: row wrap;

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

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

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

article {
  flex: 1;
}

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

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

article:nth-of-type(3) {
  flex: 2;
}

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

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

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

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

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

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

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

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

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

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

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

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

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

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

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

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

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

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

button:first-child {
  align-self: flex-end;
}

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

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

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

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

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

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

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

button:first-child {
  order: 1;
}

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

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

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

button:last-child {
  order: -1;
}

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

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

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

section - article
          article
          article - div - button   
                    div   button
                    div   button
                          button
                          button

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

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

section {
  display: flex;
}

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

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}

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

article:nth-of-type(3) div:first-child {
  flex: 1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

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

button {
  flex: 1;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}

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

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

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

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

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

Подытожим

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

Как работает CSS Flexbox

Как работает CSS Flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси.

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

Модуль flexbox позволяет решать следующие задачи:

• Располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх.
• Переопределять порядок отображения элементов.
• Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство.
• Решать проблему с горизонтальным и вертикальным центрированием.
• Переносить элементы внутри контейнера, не допуская его переполнения.
• Создавать колонки одинаковой высоты.
• Создавать прижатый к низу страницы подвал сайта.

Flexbox решает специфические задачи — создание одномерных макетов, например, навигационной панели, так как flex-элементы можно размещать только по одной из осей.

Основные понятия

Как работает CSS Flexbox

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

Главная ось (main axis) — ось, вдоль которой выкладываются flex-элементы. Она простирается в основном измерении.

Main start и main end — линии, которые определяют начальную и конечную стороны flex-контейнера, относительно которых выкладываются flex-элементы (начиная с main start по направлению к main end).

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

Поперечная ось (cross axis) — ось, перпендикулярная главной оси. Она простирается в поперечном измерении.

Cross start и cross end — линии, которые определяют начальную и конечную стороны поперечной оси, относительно которых выкладываются flex-элементы.

Поперечный размер (cross size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.

Flex-контейнер

Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнер не является блочным контейнером, поэтому для дочерних элементов не работают такие CSS-свойства, как float, clear, vertical-align. Также, на flex-контейнер не оказывают влияние свойства column-*, создающие колонки в тексте и псевдоэлементы ::first-line и ::first-letter.

Модель flexbox-разметки связана с определенным значением CSS-свойства display родительского html-элемента, содержащего внутри себя дочерние блоки. Для управления элементами с помощью этой модели нужно установить свойство display следующим образом:

.flex-container {
/*генерирует flex-контейнер уровня блока*/
display: -webkit-flex;
display: flex;
}

.flex-container {
/*генерирует flex-контейнер уровня строки*/
display: -webkit-inline-flex;
display: inline-flex;
}

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

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

Flex-элементы

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

• Для flex-элементов блокируется их значение свойства display. Значение display: inline-block; и display: table-cell; вычисляется в display: block;.
• Пустое пространство между элементами исчезает: оно не становится своим собственным flex-элементом, даже если межэлементный текст обернут в анонимный flex-элемент. Для содержимого анонимного flex-элемента невозможно задать собственные стили, но оно будет наследовать их (например, параметры шрифта) от flex-контейнера.
• Абсолютно позиционированный flex-элемент не участвует в компоновке гибкого макета.
• Поля margin соседних flex-элементов не схлопываются.
• Процентные значения margin и padding вычисляются от внутреннего размера содержащего их блока.
• margin: auto; расширяются, поглощая дополнительное пространство в соответствующем измерении. Их можно использовать для выравнивания или раздвигания смежных flex-элементов.
• Автоматический минимальный размер flex-элементов по умолчанию является минимальным размером его содержимого, то есть min-width: auto;. Для контейнеров с прокруткой автоматический минимальный размер обычно равен нулю.

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

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

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

Display: Flex

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

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

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

#container {
display: flex;
}

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

Flex Direction

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

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

#container {
display: flex;
flex-direction: column;
}

Justify Content

Justify-content отвечает за выравнивание элементов по главной оси/

Вернемся к flex-directional: row.

#container {
display: flex;
flex-direction: row;
justify-content: flex-start;
}

Justify-content может принимать 5 значений:

1. flex-start;
2. flex-end;
3. center;
4. space-between;
5. space-around.

Space-between задает одинаковое расстояние между квадратами, но не между контейнером и квадратами. Space-around также задает одинаковое расстояние между квадратами, но теперь расстояние между контейнером и квадратами равно половине расстояния между квадратами.

Align Self

Align-self позволяет выравнивать элементы по отдельности.

#container {
align-items: flex-start;
}

.square#one {
align-self: center;
}

// Only this square will be centered.

Давайте для двух квадратов применим align-self, а для остальных применим align-items: center и flex-directional: row.

Flex Grow

Это свойство немного сложнее.

Для начала давайте зададим нашим квадратикам одинаковую ширину в 120px:

По умолчанию значение flex — grow равно 0. Это значит, что квадратам запрещено расти (занимать оставшееся место в контейнере).

Попробуем задать flex-grow равным 1 для каждого квадрата:

Квадраты заняли оставшееся место в контейнере. Значение flex-grow аннулирует значение ширины.

Но здесь возникает один вопрос: что значит flex-grow: 1?

Попробуем задать flex-grow равным 999:

И… ничего не произошло. Так получилось из-за того, что flex-grow принимает не абсолютные значения, а относительные.

Это значит, что не важно, какое значение у flex-grow, важно, какое оно по отношению к другим квадратам:

Вначале flex-grow каждого квадрата равен 1, в сумме получится 6. Значит, наш контейнер поделен на 6 частей. Каждый квадрат будет занимать 1/6 часть доступного пространства в контейнере.

Когда flex-grow третьего квадрата становится равным 2, контейнер делится на 7 частей (1 + 1 + 2 + 1 + 1 + 1).

Теперь третий квадрат занимает 2/7 пространства, остальные — по 1/7.

И так далее.

Стоит помнить, что flex-grow работает только для главной оси (пока мы не поменяем ее направление).

Заключение

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

источник

Используем CSS Flexible Boxes — Веб-технологии для разработчиков

Эта статья устарела и удалена из английской версии. Вместо неё идёт перенаправление на статью:

У меня не поднялась рука удалить эту статью окончательно, но я рекомендую Вам вместо неё, всё-таки, прочитать ту.

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

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

Внимание: некоторые браузеры все еще могут частично или полностью не поддерживать флексбоксы. Ознакомьтесь с таблицей совместимости.

Концепция Flexbox

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

Алгоритм разметки флексбоксами агностичено направлен в противовес блочной разметке, которая ориентирована строго вертикально, или горизонтально-ориентированной инлайн-разметке. Несмотря на то что разметка блоками хорошо подходит для страницы, ей не хватает объективного механизма для поддержки компонентов, которые должны менять ориентацию, размеры а также растягиваться или сжиматься при изменениях размера экрана, изменении ориентации с вертикальной на горизонтальную и так далее. Разметка флексбоксами наиболее желательна для компонентов приложения и шаблонов, которые мало масштабируются, тогда как grid-разметка создана для больших шаблонов. Обе технологии являются частью разработки CSS Working Group которая должна способствовать совместимости web-приложений с различными браузерами, режимами а также большей гибкости.

Терминология

Поскольку описание флексбоксов не включает таких словосочетаний, как горизонтальная / inline и вертикальная / block оси, объяснение модели предусматривает новую терминологию. Используйте следующую диаграмму при просмотре словаря терминов. Она изображает flex-контейнер, имеющий flex-направление ряда, что означает, что каждый flex item расположен горизонтально, друг за другом по главной оси (main axis) в соответствии с установленным направлением написания текста элемента. Слева направо в данном случае.

Flex-контейнер

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

Flex-элемент, flex item

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

Оси

Каждый flexible-бокс шаблон строится по двум осям. Главная ось (main axis) — это ось, вдоль которой flex-элементы следуют один за другим, а перекрёстная ось (cross axis) перпендикулярна ей.

• Свойство flex-direction устанавливает главную ось.
• Свойство justify-content определяет расположение элементов вдоль главной оси в текущем ряду.
• Свойство align-items расположение элементов вдоль перекрёстной оси в текущем ряду.
• Свойство align-self устанавливает, как отдельный flex-элемент выровнен по перекрёстной оси, переопределяя значения, установленные с помощью align-items.

Направления

Главное начало и конец (main) и перекрёстное начало и конец (cross start/end) — это стороны контейнера, определяющие начало и окончание потока flex-элемментов. Они следуют по главной и перекрестной осями flex-контейнера в векторе, установленном режимом написания (writing-mode) (слева направо, справа налево и т. д.).

• Свойство order присваивает элементы порядковым группам и определяет, в каком порядке их показывать.
• Свойство flex-flow — это короткая форма, состоящая из свойств flex-direction и flex-wrap, определяющих расплолжение элементов.

Линии

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

Размеры

Флекс элементы агностически эквивалентны высоте и ширине главного размера и поперечного размера, которые равны, соответственно,  главной оси (main axis) и поперечной оси (cross axis) флекс-контейнера.

Делаем элемент флексбоксом

Чтобы сделать элемент flexible-боксом, укажите значение display следующим образом:

display: flex

или

display: inline-flex

Таким образом мы определяем элемент как флексбокс, а его дочерниие элементы — как flex-элементы. Значение flex делает контейнер блочным элементом, а inline-flex значение превращает его в инлайн-элемент.

Внимание: для указания префикса вендора, добавьте строку в значение атрибута, а не к самому атрибуту. Например, display: -webkit-flex.

Рассмотрим flex-элементы

Текст, который содержится непосредственно внутри flex-контейнера, автоматически оборачивается анонимным flex-элементом. Однако, анонимный flex-элемент, содержащий только пробелы, не отображается (как будто было указано значение display: none).

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

Отступы (margin) соседних flex-контейнеров не схлопываются. Установка значений margin: auto поглощает дополнительное место в вертикальном или горизонтальном направлении и может быть использовано для выравнивания или для разделения соседних flex-элементов. См. Выравнивание при помощи ‘автоматических’ отступов в разделе «Модель расположения при помощи flex-контейнеров» спецификации W3C.

Свойства выравнивания flexbox выполняют «истинное» центрирование в отличие от других способов центрирования в CSS. Это означает, что flex-элементы будут оставаться отцентрированными даже если они переполняют flex-контейнер. Впрочем, это может иногда быть проблематичным, если они вылезают за верхний или левый край страницы (в языках с написанием слева направо; в языках с написанием справа налево, таких как арабский, возникает проблема с правой границей), так как вы не можете прокрутить страницу в данную область даже если там есть содержимое! В будущем релизе свойства выравнивания будут также дополнены «безопасной» опцией. На данный момент, если это проблема, вы можете использовать отступы (margin) для достижения центрирования, так как они сработают «безопасно» и центрирование будет прекращено при переполнении. Вместо использования свойства align- просто установите автоматические отступы (margin: auto) для flex-элементов, которые вы хотите отцентрировать. Вместо свойств justify- установите margin: auto на внешние края первого и последнего элемента в flex-контейнере. Автоматические отступы будут «подстраиваться» и занимать оставшееся место, центрируя flex-элементы при наличии свободного места и используя стандартное выравнивание при его отсутствии. Тем не менее, если вы пытаетесь заменить justify-content центрированием, основанным на отступах (margin-based) в многострочном flexbox, вам, видимо, не повезло, так как вам необходимо установить отступы для первого и последнего элемента на каждой строке. Если вы не можете предугадать заранее на какой строке окажется каждый элемент, вы не сможете надежно использовать центрирование, основанное на отступах, на основной оси для замены свойства justify-content.

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

Свойства Flexbox

Свойства, не влияющие на Flexbox

Так как flexbox используют другой алгоритм расположения, некоторые свойства не имеют смысла для flex-контейнера:

Пример

Типичный пример flex

Типичный пример показывает как применять «flex-эффект» к элементам и как соседние элементы ведут себя в состоянии flex.

​<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
    .flex {
        /* basic styling */
        width: 350px;
        height: 200px;
        border: 1px solid #555;
        font: 14px Arial;

        /* flexbox setup */
        display: flex;
        flex-direction: row;
    }

    .flex > div {
        flex: 1 1 auto;
        width: 30px; /* To make the transition work nicely. (Transitions to/from
                        "width:auto" are buggy in Gecko and Webkit, at least.
                        See http://bugzil.la/731886 for more info.) */
        transition: width 0.7s ease-out;
    }

    /* colors */
    .flex > div:nth-child(1){ background: #009246; }
    .flex > div:nth-child(2){ background: #F1F2F1; }
    .flex > div:nth-child(3){ background: #CE2B37; }

    .flex > div:hover {
        width: 200px;
    }
   
    </style> 
  </head>
  <body>
    <p>Flexbox nuovo</p>
    <div>
      <div>uno</div>
      <div>due</div>
      <div>tre</div>
    </div>
  </body>
</html>

Пример расположения «Священный Грааль»

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

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

​<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
    body {
        font: 24px Helvetica;
        background: #999999;
    }

    #main {
        min-height: 800px;
        margin: 0px;
        padding: 0px;
        display: flex;
        flex-flow: row;
    }
 
    #main > article {
        margin: 4px;
        padding: 5px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: #dddd88;
        flex: 3 1 60%;
        order: 2;
    }

    #main > nav {
        margin: 4px;
        padding: 5px;
        border: 1px solid #8888bb;
        border-radius: 7pt;
        background: #ccccff;
        flex: 1 6 20%;
        order: 1;
    }
  
    #main > aside {
        margin: 4px;
        padding: 5px;
        border: 1px solid #8888bb;
        border-radius: 7pt;
        background: #ccccff;
        flex: 1 6 20%;
        order: 3;
    }
 
    header, footer {
        display: block;
        margin: 4px;
        padding: 5px;
        min-height: 100px;
        border: 1px solid #eebb55;
        border-radius: 7pt;
        background: #ffeebb;
    }
 
    /* Too narrow to support three columns */
    @media all and (max-width: 640px) {
        #main, #page {
            flex-direction: column;
        }

        #main > article, #main > nav, #main > aside {
        /* Return them to document order */
            order: 0;
        }
  
        #main > nav, #main > aside, header, footer {
            min-height: 50px;
            max-height: 50px;
        }
    }
    </style>
  </head>
  <body>
    <header>header</header>
    <div>
      <article>article</article>
      <nav>nav</nav>
      <aside>aside</aside>
    </div>
    <footer>footer</footer>
  </body>
</html>

Песочница

Существует несколько песочниц с flexbox, доступных онлайн для экспериментов:

О чем нужно помнить

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

Flexbox располагаются в соответствие с направлением письма, что означает, что главное начало и главный конец располагаются в зависимости от положения начала и конца (строки — прим.).

Перекрестное начало и перекрестный конец полагаются на определение позиции начала и конца, которое зависит от значения свойства direction.

Разрывы страницы допустимы в расположении flex-контейнеров, когда это позволяет свойство break-. Свойства CSS3 break-after, break-before и break-inside, а также свойства CSS 2.1 page-break-before, page-break-after и page-break-inside работают на flex-контейнере, flex-элементах, а также внутри flex-элементов.

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

[1] Safari до версии 6.0 (iOS.1) поддерживал старую несовместимую черновую версию спецификации. Safari 6.1 (и Safari на iOS 7) был обновлен для поддержки финальной версии.

[2] До Firefox 22, чтобы активировать поддержку flexbox, пользователь должен установить параметр about:config layout.css.flexbox.enabled в значение true. Начиная с Firefox 22 по Firefox 27, параметр установлен в true по умолчанию, и полностью исключен в Firefox 28.

[3] Internet Explorer 10 поддерживает старую несовместимую черновую версию спецификации; Internet Explorer 11 был обновлен для поддержки финальной версии.

[4] Android browser до версии 4.3 поддерживал старую несовместимую черновую версию спецификации. Android 4.4 был обновлен для поддержки финальной версии.

[5] Хотя изначальная реализация в Opera 12.10 flexbox была без приставки, она получила приставку -webkit в версиях с 15 по 16 Opera и с 15 по 19 Opera Mobile. Приставка была снова убрана в Opera 17 и Opera Mobile 24.

[6] До Firefox 29, установка visibility: collapse для flex-элемента заставляет его обрабатываться как display: none вместо предполагаемого поведения, обрабатывающего его как visibility: hidden. Предложенное решение — использовать visibility:hidden для flex-элементов, которые должны вести себя как при установленном visibility:collapse. Для большей информации, см баг 783470.

См. также

• Проект Flexbugs для информации о багах в браузерных реализациях flexbox.

Основные концепции flexbox — веб-технологии для разработчиков

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

Когда мы описываем flexbox как одномерный, мы описываем тот факт, что flexbox работает с макетом в одном измерении за раз — либо как строка, либо как столбец.Это можно сравнить с двумерной моделью CSS Grid Layout, которая управляет столбцами и строками вместе.

Две оси flexbox

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

Главная ось

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

• ряд
• ряд-обратный
• колонка
• колонка обратная

Если вы выберете ряд или обратный ряд , ваша главная ось будет проходить вдоль ряда в линейном направлении .

Выберите столбец или обратный столбец , и ваша главная ось будет проходить от верха страницы до низа — в направлении блока .

Поперечная ось

Поперечная ось проходит перпендикулярно главной оси, поэтому, если для вашего flex-direction (главная ось) установлено значение row или row-reverse , поперечная ось проходит вниз по столбцам.

Если ваша главная ось — это столбец или обратный столбец , то поперечная ось проходит вдоль строк.

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

Начальная и конечная строки

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

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

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

Если бы я работал на арабском языке, то начальный край моей главной оси был бы справа, а конечный край — слева.

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

Через некоторое время думать о начале и конце, а не о левом и правом, становится естественным и будет полезно для вас при работе с другими методами компоновки, такими как CSS Grid Layout, которые следуют тем же шаблонам.

Гибкий контейнер

Область документа, размещенная с помощью flexbox, называется гибким контейнером . Чтобы создать гибкий контейнер, мы устанавливаем для свойства display контейнера области значение flex или inline-flex .Как только мы это сделаем, прямые потомки этого контейнера станут гибкими элементами . Как и для всех свойств в CSS, некоторые начальные значения определены, поэтому при создании гибкого контейнера все содержащиеся в нем гибкие элементы будут вести себя следующим образом.

• Элементы отображаются в строке (свойство flex-direction по умолчанию — строка ).
• Элементы начинаются с начального края главной оси.
• Предметы не растягиваются по основному размеру, но могут сжиматься.
• Элементы растянутся, чтобы заполнить размер поперечной оси.
• Для свойства flex-base задано значение auto .
• Для свойства flex-wrap установлено значение nowrap .

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

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

Изменение направления гибкости

Добавление свойства flex-direction к гибкому контейнеру позволяет нам изменять направление, в котором отображаются наши гибкие элементы. Установка flex-direction: row-reverse сохранит элементы, отображаемые вдоль строки, однако начальная и конечная линии будут переключаться.

Если мы изменим flex-direction на column , переключится главная ось, и наши элементы теперь отображаются в столбце. Установите column-reverse , и начальная и конечная строки снова поменяются местами.

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

Многострочные гибкие контейнеры с гибкой пленкой

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

Чтобы вызвать упаковку, добавьте свойство flex-wrap со значением wrap . Теперь, если ваши элементы будут слишком большими для отображения в одной строке, они будут перенесены на другую строку. В приведенном ниже живом примере содержатся элементы, которым задана ширина, общая ширина элементов слишком велика для гибкого контейнера.Поскольку flex-wrap настроен на wrap , элементы переносятся. Установите для него значение nowrap , которое также является начальным значением, и вместо этого они будут сжиматься, чтобы соответствовать контейнеру, потому что они используют исходные значения flexbox, которые позволяют элементам сжиматься. Использование nowrap могло бы вызвать переполнение, если бы элементы не могли сжиматься или не могли сжиматься настолько, чтобы поместиться.

Дополнительные сведения об упаковке гибких элементов см. В руководстве «Освоение упаковки гибких элементов».

Сокращение гибкого потока

Вы можете объединить два свойства flex-direction и flex-wrap в сокращенное обозначение flex-flow .Первое указанное значение — flex-direction , а второе значение — flex-wrap .

В приведенном ниже живом примере попробуйте изменить первое значение на одно из допустимых значений для flex-direction — row , row-reverse , column или column-reverse , а также измените второе на wrap и nowrap .

Свойства, применяемые к элементам гибкости

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

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

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

Если у нас есть три элемента шириной 100 пикселей в контейнере с шириной 500 пикселей, то пространство, которое нам нужно для размещения наших элементов, составляет 300 пикселей. Это оставляет 200 пикселей доступного пространства. Если мы не изменим начальные значения, flexbox поместит это пространство после последнего элемента.

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

Свойство гибкости

Гибкая основа определяет размер этого элемента с точки зрения пространства, которое он оставляет как доступное пространство. Начальное значение этого свойства — auto — в этом случае браузер проверяет, имеют ли элементы размер. В приведенном выше примере все элементы имеют ширину 100 пикселей, поэтому он используется в качестве гибкого базиса .

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

Свойство гибкого роста

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

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

Свойство flex-grow можно использовать для пропорционального распределения пространства. Если мы дадим нашему первому элементу flex-grow значение 2, а остальным элементам значение 1, первому элементу будут присвоены 2 части (100 пикселей из 200 пикселей в случае приведенного выше примера), по 1 части каждый два других (по 50 пикселей из 200 пикселей).

Свойство гибкости и усадки

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

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

Обратите внимание, что эти значения для flex-grow и flex-shrink являются пропорциями. Обычно, если у всех наших элементов установлено значение flex: 1 1 200px , а затем требуется, чтобы один элемент увеличивался в два раза быстрее, мы устанавливаем для этого элемента значение flex: 2 1 200px .Однако вы можете использовать flex: 10 1 200px и flex: 20 1 200px , если хотите.

Сокращенные значения свойств гибкости

Вы очень редко встретите свойства flex-grow , flex-shrink и flex-base , используемые по отдельности; вместо этого они объединены в сокращение flex . Сокращение flex позволяет вам установить три значения в этом порядке — flex-grow , flex-shrink , flex-base .

Живой пример ниже позволяет вам проверить различные значения сокращения гибкости; помните, что первое значение — flex-grow . Положительное значение означает, что предмет может расти. Второй — flex-shrink — при положительном значении элементы могут сжиматься, но только если их общие значения выходят за пределы основной оси. Окончательное значение — flex-base ; это значение, которое элементы используют в качестве своего базового значения для роста и уменьшения.

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

• изгиб: начальный
• шлейф: авто
• гибкость: нет
• flex: <положительный-номер>

Настройка flex: initial сбрасывает элемент до начальных значений Flexbox. Это то же самое, что и flex: 0 1 auto . В этом случае значение flex-grow равно 0, поэтому элементы не будут расти больше, чем их размер flex-base .Значение flex-shrink равно 1, поэтому при необходимости элементы могут сжиматься, а не переполняться. Значение flex-base равно auto . Элементы будут использовать любой размер, установленный для элемента в основном измерении, или они будут получать свой размер из размера содержимого.

Использование flex: auto аналогично использованию flex: 1 1 auto ; все как с flex: начальный , но в этом случае элементы могут расти и заполнять контейнер, а также сжиматься, если это необходимо.

Использование flex: none создаст полностью негибкие гибкие элементы. Это как если бы вы написали flex: 0 0 auto . Элементы не могут увеличиваться или уменьшаться, но будут размещены с использованием flexbox с flex-base или auto .

Сокращение, которое вы часто видите в учебных пособиях: flex: 1 или flex: 2 и так далее. Это как если бы вы использовали flex: 1 1 0 . Элементы могут увеличиваться и уменьшаться с на гибкой основе , равной 0.

Попробуйте эти сокращенные значения в живом примере ниже.

Выравнивание, обоснование и распределение свободного пространства между элементами

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

align-items

Свойство align-items выравнивает элементы по поперечной оси.

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

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

• растяжка
• гибкий старт
• гибкий конец
• центр

justify-content

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

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

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

• гибкий старт
• гибкий конец
• центр
• ок.
• межосевое
• равномерно

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

Следующие шаги

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

.

Выравнивание элементов в контейнере Flex — веб-технология для разработчиков

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

Для центрирования нашего блока мы используем свойство align-items , чтобы выровнять наш элемент по поперечной оси, которая в данном случае является осью блока, идущей вертикально.Мы используем justify-content для выравнивания элемента по главной оси, которая в данном случае является горизонтальной горизонтальной осью.

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

Свойства, управляющие выравниванием

В этом руководстве мы рассмотрим следующие свойства.

• justify-content — контролирует выравнивание всех элементов по главной оси.
• align-items — контролирует выравнивание всех элементов по поперечной оси.
• align-self — контролирует выравнивание отдельного гибкого элемента по поперечной оси.
• align-content — описывается в спецификации как «гибкие линии упаковки»; контролирует расстояние между гибкими линиями на поперечной оси.

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

Примечание : свойства выравнивания во Flexbox были помещены в их собственную спецификацию — CSS Box Alignment Level 3.Ожидается, что эта спецификация в конечном итоге заменит свойства, определенные во Flexbox Level One.

Поперечная ось

Свойства align-items и align-self управляют выравниванием наших гибких элементов по поперечной оси, вниз по столбцам, если flex-direction — row и вдоль строки, если flex-direction — столбец .

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

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

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

• align-items: flex-start
• align-items: гибкий конец
• align-items: center
• align-items: stretch
• align-items: baseline

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

Выравнивание одного элемента с align-self

Свойство align-items устанавливает свойство align-self для всех гибких элементов как группы. Это означает, что вы можете явно объявить свойство align-self для нацеливания на один элемент. Свойство align-self принимает все те же значения, что и align-items , плюс значение auto , которое сбрасывает значение до значения, определенного в гибком контейнере.

В следующем живом примере гибкий контейнер имеет align-items: flex-start , что означает, что все элементы выровнены по началу поперечной оси. Я выбрал первый элемент с помощью селектора first-child и установил для этого элемента значение align-self: stretch ; другой элемент был выбран с использованием его класса , выбранного и присвоенного align-self: center . Вы можете изменить значение align-items или изменить значения align-self для отдельных элементов, чтобы увидеть, как это работает.

Замена главной оси

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

Если мы изменим flex-direction на column, align-items и align-self выровняют элементы слева и справа.

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

Выравнивание содержимого по поперечной оси — свойство align-content

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

Для работы align-content вам потребуется большая высота гибкого контейнера, чем требуется для отображения элементов. Затем он работает со всеми элементами как с набором и определяет, что происходит с этим свободным пространством, и выравнивает весь набор элементов внутри него.

Свойство align-content принимает следующие значения:

• align-content: flex-start
• align-content: flex-end
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: stretch
• align-content: равномерно (не определено в спецификации Flexbox)

В приведенном ниже живом примере гибкий контейнер имеет высоту 400 пикселей, что больше, чем необходимо для отображения наших элементов.Значение align-content равно space-between , что означает, что доступное пространство делится между гибкими линиями, которые размещаются заподлицо с началом и концом контейнера на поперечной оси.

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

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

Примечание : значение равномерно по пространству не определено в спецификации Flexbox и является более поздним дополнением к спецификации Box Alignment. Браузер поддерживает это значение не так хорошо, как поддержка значений, определенных в спецификации flexbox.

См. Документацию по justify-content на MDN для получения дополнительных сведений обо всех этих значениях и поддержке браузером.

Выравнивание содержимого по главной оси

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

В нашем начальном примере с display: flex на контейнере элементы отображаются в виде строки, и все они выстраиваются в линию в начале контейнера.Это связано с тем, что начальное значение justify-content равно flex-start . Любое доступное пространство помещается в конец элементов.

Свойство justify-content принимает те же значения, что и align-content .

• justify-content: flex-start
• justify-content: flex-end
• justify-content: центр
• justify-content: space-between
• justify-content: space-around
• justify-content: равномерно (не определено в спецификации Flexbox)

В приведенном ниже примере значение justify-content равно пробел между .Доступное пространство после отображения элементов распределяется между элементами. Левый и правый элемент выстраиваются на одном уровне с началом и концом.

Если главная ось находится в направлении блока, потому что flex-direction установлен на column , тогда justify-content будет распределять пространство между элементами в этом измерении до тех пор, пока в гибком контейнере есть место для распределения.

Режимы выравнивания и записи

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

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

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

Выравнивание и направление изгиба

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

В этом следующем примере у меня есть элементы, расположенные с flex-direction: row-reverse и justify-content: flex-end .На языке слева направо все элементы выстраиваются в линию слева. Попробуйте изменить flex-direction: row-reverse на flex-direction: row . Вы увидите, что теперь элементы переместятся в правую сторону.

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

Вы можете переключить их для отображения в направлении блока для языка вашего документа, выбрав flex-direction: column . Тогда flex-start будет там, где начинается верхняя часть первого абзаца текста.

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

Использование автоматических полей для выравнивания по главной оси

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

Обычным шаблоном является панель навигации, где некоторые ключевые элементы выровнены по правому краю, а основная группа — слева. Вы можете подумать, что это должен быть вариант использования свойства justify-self , однако рассмотрите изображение ниже. У меня три предмета с одной стороны и два с другой. Если бы я мог использовать justify-self в элементе d , это также изменило бы выравнивание элемента e , которое следует далее, что может быть или не быть моим намерением.

Вместо этого мы можем нацелить элемент 4 и отделить его от первых трех элементов, присвоив ему значение margin-left auto .Автоматические поля будут занимать все пространство, которое они могут по своей оси — так работает центрирование блока с автоматическим левым и правым полем. Каждая сторона пытается занять как можно больше места, поэтому блок выталкивается в середину.

В этом живом примере у меня есть элементы гибкости, расположенные просто в ряд с базовыми значениями гибкости, а у класса push есть margin-left: auto . Вы можете попробовать удалить это или добавить класс к другому элементу, чтобы увидеть, как это работает.

Будущие функции выравнивания для Flexbox

В начале этой статьи я объяснил, что свойства выравнивания, которые в настоящее время содержатся в спецификации flexbox уровня 1, также включены в уровень выравнивания блока 3, который вполне может расширить эти свойства и значения в будущем.Мы уже видели одно место, где это произошло, с введением значения с равномерным пространством для свойств align-content и justify-content .

Модуль «Выравнивание боксов» также включает другие методы создания пространства между элементами, такие как интервал между столбцами и интервал между строками , как показано в CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы сможем использовать column-gap и row-gap также в гибких макетах, а в Firefox 63 вы найдете первую реализацию свойств зазора в браузере в гибкий макет.

Мое предложение при более глубоком изучении выравнивания flexbox — делать это одновременно с выравниванием в Grid Layout. Обе спецификации используют свойства выравнивания, подробно описанные в спецификации Box Alignment. Вы можете увидеть, как эти свойства ведут себя при работе с сеткой, в статье MDN «Выравнивание ящиков в макете сетки», и я также сравнил, как работает выравнивание в этих спецификациях, в моей шпаргалке по выравниванию ящиков.

См. Также

.

Заказ элементов Flex — веб-технология для разработчиков

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

Обратное отображение элементов

свойство flex-direction может принимать одно из четырех значений:

• ряд
• колонка
• ряд-обратный
• колонка обратная

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

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

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

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

“Примечание. Возможности переупорядочения гибкого макета намеренно влияют только на визуальный рендеринг, оставляя порядок речи и навигацию на основе исходного порядка. Это позволяет авторам манипулировать визуальным представлением, оставляя неизменным исходный порядок для не-CSS UA и для линейных моделей, таких как речь и последовательная навигация.»- Заказ и ориентация

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

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

«Авторы не должны использовать порядок или * -reverse значения flex-flow / flex-direction в качестве замены правильного упорядочивания источника, так как это может нарушить доступность документа.”

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

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

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

заказ недвижимость

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

Свойство порядка предназначено для размещения элементов в порядковых группах . Это означает, что элементам присваивается целое число, которое представляет их группу. Затем элементы размещаются в визуальном порядке в соответствии с этим целым числом, сначала самые низкие значения. Если несколько элементов имеют одинаковое целочисленное значение, то внутри этой группы элементы располагаются в соответствии с исходным порядком.

В качестве примера у меня есть 5 гибких элементов, и я назначаю порядка значений следующим образом:

• Исходный элемент 1: заказ: 2
• Исходный элемент 2: заказ: 3
• Исходный элемент 3: заказ: 1
• Исходный элемент 4: заказ: 3
• Исходный элемент 5: заказ: 1

Эти элементы будут отображаться на странице в следующем порядке:

• Исходный элемент 3: заказ: 1
• Исходный элемент 5: заказ: 1
• Исходный элемент 1: заказ: 2
• Исходный элемент 2: заказ: 3
• Исходный элемент 4: заказ: 3

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

Элементы

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

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

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

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

Заказ также изменяет порядок окраски предметов; предметы с более низким значением для порядка будут окрашены первыми, а предметы с более высоким значением для порядка — затем окрашены.

Порядок собственности и доступности

Использование свойства order имеет те же последствия для доступности, что и изменение направления с помощью flex-direction .Использование order изменяет порядок, в котором элементы окрашиваются, и порядок, в котором они отображаются визуально. Это не меняет порядок последовательной навигации по элементам. Поэтому, если пользователь перемещается между элементами, он может запутаться в вашем макете.

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

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

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

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

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

Карта будет нашим гибким контейнером с flex-direction , установленным в столбец. Затем я даю дату , заказ от -1 . Это поднимет его над заголовком.

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

.

CSS свойство гибкости

Пример

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

#main div {
-ms-flex: 1; / * IE 10 * /
гибкость: 1;
}

Попробуй сам »

Определение и использование

Свойство flex является сокращенным свойством для:

Свойство flex устанавливает гибкую длину гибких элементов.

Примечание: Если элемент не является гибким, свойство flex не действует.

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следуют -webkit-, -ms- или -moz- указывают первую версию, которая работала с префиксом.

Синтаксис CSS

flex: flex-grow flex-shrink flex-base | авто | начальный | наследование;

Стоимость недвижимости

Связанные страницы

Учебное пособие по CSS: CSS Flexible Box

Ссылка CSS: свойство flex-basic

Ссылка CSS: свойство flex-direction

Ссылка CSS: свойство flex-flow

Ссылка CSS: свойство flex-grow

Ссылка CSS: свойство flex-shrink

Ссылка CSS: свойство flex-wrap

Ссылка на HTML DOM: свойство flex

.