Flex css верстка: Вёрстка с помощью CSS Flexbox

Содержание

Исследование 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 в своих проектах?

Учебник CSS 3. Статья «Верстка по Flexbox. Часть 2.»

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

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

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

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

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

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

Обращаю Ваше внимание, что если вы указываете значение свойства order для одного флекс элемента в контейнере, то это не будет являться его порядковым номером, а указывает только на «вес» его позиции по отношению к другим элементам. Допускается применение отрицательных значений (значение -1, например, смещает элемент к левому краю родительского контейнера). Значение по умолчанию 0.

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

Рис. 218 Схематичное отображение работы CSS свойства order

В этом учебнике мы уже неоднократно сталкивались со свойством z-index, благодаря которому, вы можете управлять видимостью элементов по оси z, принцип указания значений свойства order аналогичен. Вы можете использовать в своей работе любые значения, которые будут вам интуитивно понятны, например, 100, 200, 300 и тому подобные.

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример изменения следования элементов в колоннах</title>
<style> 
.container,
.container2,
.container3 {
	display: flex;  /* элемент отображается как блочный флекс контейнер */
}
div > div { 
	width: 50px; /* устанавливаем ширину блока */
	height: 50px;  /* устанавливаем высоту блока */
	color: #fff;  /* цвет текста */
	margin: 1px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
} 
.container div:nth-of-type(4) { /* выбираем четвертый <div> в первом контейнере */ 
	order: -1;  /* определяем порядок следования флекс элемента */
	background: violet;  /* цвет заднего фона */ 
}
.container2 div:nth-of-type(4) { /* выбираем четвертый <div> во втором контейнере */ 
	order: 1;  /* определяем порядок следования флекс элемента */
	background: violet;  /* цвет заднего фона */ 
}
. container3 div:nth-of-type(4) { /* выбираем четвертый <div> в третьем контейнере */ 
	order: 2;  /* определяем порядок следования флекс элемента */
	background: violet;  /* цвет заднего фона */ 
}
</style>
</head>
	<body>
		<p>order: -1;</p>
		<div class = "container">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
		<p>order: 1;</p>
		<div class = "container2">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
		<p>order: 2;</p>
		<div class = "container3">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
	</body>
</html>

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по пять элементов <div>. С использованием псевдокласса :nth-of-type() указали для каждого четвертого элемента в определенном контейнере следующие значения свойства order:

Для элемента в первом контейнере значение -1, что позволяет сместить элемент к левому краю родительского контейнера относительно остальных элементов, которые по умолчанию имеют значение 0 свойства order.
Для элемента во втором контейнере значение 1, что позволяет сместить элемент к правому краю родительского контейнера относительно остальных элементов.
Для элемента в третьем контейнере значение 2, что позволяет сместить элемент к правому краю родительского контейнера относительно остальных элементов. Еще раз обращаю Ваше внимание, что значение не является его порядковым номером, мы могли указать значение 100, 200, 500, элемент не изменит своей позиции так как другие элементы в контейнере имеют значение этого свойства равное 0.

Результат примера:

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример изменения следования элементов в колоннах</title>
<style> 
.container {
	display: flex;  /* элемент отображается как блочный флекс контейнер */
	flex-direction: column; /* флекс элементы отображаются вертикально как колонны (формируются сверху вниз) */
}
.container:hover {
	flex-direction: column-reverse; /* флекс элементы отображаются вертикально как колонны (формируются снизу вверх) */
}
div > div {
	height: 50px;  /* устанавливаем высоту блока */
	color: #fff;  /* цвет текста */
	margin: 1px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
} 
.container div:nth-of-type(5) { /* выбираем пятый <div> в  контейнере */ 
	order: -100;  /* определяем порядок следования флекс элемента */
	background: violet;  /* цвет заднего фона */
}
. container div:nth-of-type(1) { /* выбираем первый <div> в  контейнере */ 
	order: 100;  /* определяем порядок следования флекс элемента */
	background: forestgreen;  /* цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "container">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
	</body>
</html>

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

Для первого элемента <div> с помощью псевдокласса :nth-of-type() мы установили значение свойства order равное 100, что позволило сместить его в конец всех элементов, а пятому элементу указали значение свойства order равное -100, что позволило сместить его влево перед всеми элементами.

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

Результат примера:

Пример изменения следования элементов в колоннах

Вертикальное выравнивание флекс элемента

В предыдущей cтатье «Верстка по Flexbox. Часть 1.» мы с Вами рассмотрели как можно произвести выравнивание всех элементов внутри флекс контейнера. Но как быть, если какой то флекс элемент необходимо выровнять по особенному? На помощь нам приходит свойство align-self, которое задает выравнивание отдельных элементов строки внутри флекс контейнера. Кроме того, это свойство переопределяет значение выравнивания, заданного для контейнера свойством align-items конкретному элементу.

Обращаю Ваше внимание, что если для флекс элемента установлено свойство margin (внешние отступы) со значением auto, то свойство align-self будет игнорировано.

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

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства align-self</title>
<style> 
.container {
	display: flex;  /* элемент отображается как блочный флекс контейнер */
	height: 250px;  /* устанавливаем высоту контейнера */
	background: rgba(0,150,208,.2); /* цвет заднего фона */
	align-items: center; /*	флекс элементы располагаются по центру контейнера (середина поперечной оси). */
}
.container > div {  /* устанавливаем стили для элементов <div>, вложенных в контейнер */
	width: 20%;  /* устанавливаем ширину блока */
	color: #fff;  /* цвет текста */
	margin: 0 5px;  /* внешние отступы */
	background: rgb(0,150,208);  /* цвет заднего фона */
	text-align: center; /* горизонтальное выравнивание текста по центру */
} 
. container div:nth-of-type(1) { /* выбираем первый <div> в  контейнере */ 
	align-self: auto;  /* флекс элемент наследует значение его родительского контейнера */
}
.container div:nth-of-type(2) { /* выбираем второй <div> в  контейнере */ 
	align-self: stretch;  /* флекс элемент растягивается по размеру строки флекс контейнера вдоль поперечной оси */
}
.container div:nth-of-type(3) { /* выбираем третий <div> в  контейнере */ 
	align-self: flex-start;  /* флекс элемент располагается в начале строки флекс контейнера (начало поперечной оси) */
}
.container div:nth-of-type(4) { /* выбираем четвертый <div> в  контейнере */ 
	align-self: flex-end;  /* флекс элемент располагается в конце строки флекс контейнера (конец поперечной оси) */
}
.container div:nth-of-type(5) { /* выбираем пятый <div> в  контейнере */ 
	align-self: baseline;  /* флекс элемент распологаются по его базовой линии строки флекс контейнера */
}
</style>
</head>
	<body>
		<div class = "container">
			<div>auto (наследует center)</div>
			<div>stretch</div>
			<div>flex-start</div>
			<div>flex-end</div>
			<div>baseline</div>
		</div>
	</body>
</html>

В этом примере мы создали блочный флекс контейнер, внутри которого мы разместили пять элементов <div> шириной 20% от родительского контейнера. С помощью свойства align-items указали, что все флекс элементы располагаются по центру контейнера (середина поперечной оси).

С использованием псевдокласса :nth-of-type() указали для каждого элемента свое значение свойства align-self.

Для первого элемента <div> мы установили значение auto (значение по умолчанию), что позволило унаследовать значение от родительского элемента, в данном случае это выполнено лишь для демонстрации, так как это не влияет на конечное отображение.

Для второго элемента <div> мы установили, что флекс элемент растягивается по размеру строки флекс контейнера вдоль поперечной оси. Если для контейнера не задано значение отличное от stretch, то именно это значение будет унаследовано.

Третий элемент располагается в начале строки флекс контейнера (начало поперечной оси), а четвертый располагается в конце строки флекс контейнера (конец поперечной оси).

Пятый флекс элемент располагается по его базовой линии строки флекс контейнера.

Результат примера:

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

Увеличение относительной ширины флекс элемента

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

Определить на сколько элемент может увеличиться по отношению к остальным флекс элементам в одном контейнере доступно с помощью свойства flex-grow.

Обращаю Ваше внимание на то, что отрицательные значения свойства flex-grow не допускаются. Значение по умолчанию 0 — элементы не будут увеличиваться.

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

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства flex-grow</title>
<style> 
.container,
.container2,
.container3 {
	display: flex;  /* элементы отображаются как блочные флекс контейнеры */
	height: 100px;  /* устанавливаем высоту для контейнеров */
}
div > div {
	color: #fff;  /* цвет текста */
	margin: 5px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
	font-size: 20px;  /* размер шрифта */
	text-align: center; /* горизонтальное выравнивание текста по центру */
} 
.container div:nth-of-type(1),
.container div:nth-of-type(3),
.container2 div:nth-of-type(1),
.container2 div:nth-of-type(3),
.container3 div:nth-of-type(1),
.container3 div:nth-of-type(3) {
	flex-grow: 1;  /* блок будет увеличен на 1 по отношению к остальным флекс элементам */
} 
.container div:nth-of-type(2) {
	flex-grow: 2;  /* блок будет увеличен на 2 по отношению к остальным флекс элементам */
} 
. container2 div:nth-of-type(2) {
	flex-grow: 3;  /* блок будет увеличен на 3 по отношению к остальным флекс элементам */
} 
.container3 div:nth-of-type(2) {
	flex-grow: 4;  /* блок будет увеличен на 4 по отношению к остальным флекс элементам */
} 
</style>
</head>
	<body>
		<div class = "container">
			<div>1</div>
			<div>2</div>
			<div>1</div>
		</div>
		<div class = "container2">
			<div>1</div>
			<div>3</div>
			<div>1</div>
		</div>
		<div class = "container3">
			<div>1</div>
			<div>4</div>
			<div>1</div>
		</div>
	</body>
</html>

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента <div>. С использованием псевдокласса :nth-of-type() указали для каждого первого и третьего элемента в каждом контейнере, что блок будет увеличен на 1 по отношению к остальным флекс элементам. Для каждого второго элемента в контейнерах указали различные значения свойства flex-grow.

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

Результат примера:

Рис. 223 Пример использования свойства flex-grow

Размер флекс элемента по умолчанию

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

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

Это свойство чем то похоже, на свойство определяющее минимальную ширину элемента (min-width), но в отличии от него свойство flex-grow не вызывает переполнение родительского элемента в то

Используем 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-элементов.

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

Feature	Firefox Mobile (Gecko)	Firefox OS	Android	IE Phone	Opera Mobile	Safari Mobile
Basic support (single-line flexbox)	18.0 (18.0)-moz^[2] 22.0 (22.0)	1.0-moz^[2] 1.1	2.1-webkit^[4] 4.4	11	12.10^[5] 15-webkit	7-webkit^[1]
Multi-line flexbox	28.0 (28.0)	1.3	2.1-webkit^[4] 4.4	11	12.10^[5] 15-webkit	7-webkit^[1]

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

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

Вы здесь: Главная — CSS — CSS3 — Управление размерами flex-элементов

Все три CSS свойства flex-basis, flex-grow и flex-shrink управляют размерами элементов внутри контейнера. Чтобы адаптивно верстать макеты, вам не обойтись без них никак. Технология flexbox пришла на смену флоатов и инлайн-блоков и если вы новичок, то начинайте верстать сразу на флексах. Устаревшие способы верстки, так или иначе, вам доведется увидеть на старых проектах. Вот тогда и узнаете про них, а пока не тратьте напрасно время.

Flex-basis

Flex-basis – это базовый размер блока по главной оси. Обратите внимание, что я говорю именно размер, а не ширина или высота. Это ключевой момент в понимании этого свойства. Все дело в направлении главной оси. Свойство flex-basis отвечает за ширину элемента, если главная ось имеет горизонтальное направление:


flex-direction: row

flex-direction: row-reverse

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

HTML структура


<div>

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

</div>

CSS


.container {

    display: flex;

}.item {

    flex-basis: 50px; 

}

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


flex-direction: column

flex-direction: column-reverse

Flex-элементы легко перестраиваются в вертикальное положение и управляются через CSS свойство. Вот такая вот магия.


.container {

    display: flex;

    flex-direction: column;

}.item {

    flex-basis: 50px; 

}

Мы можем задать элементам ширину (width) или высоту (height), но нужно помнить, что у flex-basis приоритет выше. Так же базовый размер соответствует указанным размерам, пока в контейнере есть свободное место. Когда мы добавляем новые элементы и места на всех не хватает, то базовый размер не соблюдаются, а поровну распределяется между всеми элементами, сильно ужимая их. Так работает адаптация, при уменьшении окна браузера, все элементы начинают сжиматься.

Flex-grow

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


<div>

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

</div>

Пропишем каждому по 1.


.item-first {

    flex-grow: 1;

}.item-last {

    flex-grow: 1;

}

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

Flex-shrink

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


.item-first {

    flex-shrink: 10;

}.item-last {

    flex-shrink: 10;

}

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

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

flex: flex-grow | flex-shrink | flex-basis


<div>

    <div>1</div>

    <div>2</div>

</div>.item-1 {

    flex: 12 0 30;

}
.item-2 {

    flex: 40 0 50;

}

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

Создано 29.01.2020 10:45:57
Михаил Русаков

Предыдущая статья Следующая статья

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

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

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

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

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

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

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Примеры использования флексбоксов — Блог HTML Academy

Это заключительная часть серии статей про флексы от Рейчел Эндрю в Smashing Magazine.

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

Ранее в этой серии

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

Стоит использовать гриды или флексы?

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

Однако, если вы только осваиваете эти технологии, нужно помнить о том, что раскладка и на гридах, и на флексах — это всё CSS. Обозначили ли вы display: grid или display: flex вы чаще используете их схожие свойства, чем отличающиеся.

И гриды, и флексы используют свойства, которые являются частью спецификации Box Alignment — выравнивания блоков, и обе эти раскладки опираются на концепции, описанные в разделе CSS Intrinsic and Extrinsic Sizing — размерности в CSS.

Задавать вопрос о том, нужно ли в вашем интерфейсе использовать гриды или флексы — почти как спрашивать: «Что использовать: размер шрифта или его цвет?»

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

Таким образом, мы не выбираем между Vue.js и React, Bootstrap или Foundation. Мы используем CSS для создания раскладки и нам нужно использовать те части CSS, которые наиболее целесообразны для этого конкретного блока макета, над которым мы работаем. Рассмотрите каждый компонент и решите, что лучше всего подойдёт для него, какая комбинация технологий лучше сработает.

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

Для чего действительно нужны флексы?

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

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

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

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

See the Pen Smashing Flexbox Series 4: Items sharing space by rachelandrew (@rachelandrew) on CodePen.

Есть также паттерны, где вы хотите видеть переносы строк, однако не хотите строгую сетку. Сравним гриды со значением repeat(auto-fill) и флексы с переносом строк. Разница между этими двумя методами будет видна сразу же.

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

See the Pen Smashing Flexbox Series 4: Grid example by rachelandrew (@rachelandrew) on CodePen.

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

See the Pen Smashing Flexbox Series 4: wrapped flex items flex-basis 150px; by rachelandrew (@rachelandrew) on CodePen.

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

See the Pen Smashing Flexbox Series 4: Wrapped items by rachelandrew (@rachelandrew) on CodePen.

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

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

See the Pen Smashing Flexbox Series 4: tags example by rachelandrew (@rachelandrew) on CodePen.

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

See the Pen Smashing Flexbox Series 4: centered by rachelandrew (@rachelandrew) on CodePen.

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

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

See the Pen Smashing Flexbox Series 4: simple row of form elements by rachelandrew (@rachelandrew) on CodePen.

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

See the Pen Smashing Flexbox Series 4: sticky footer card by rachelandrew (@rachelandrew) on CodePen.

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

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

Например, если есть компонент навигации с использованием гридов, я буду создавать достаточное количество полос для всех элементов, так как не хочу, чтобы создавался новый ряд, если будет «слишком много» элементов. С флексами, до тех пор, пока я разрешаю элементам быть гибкими с flex-basis: 0 или auto, элементы позволят новым соседям стать с ними в ряд и оставят для них место.

Когда не стоит использовать флексы?

Мы рассмотрели некоторые причины, по которым думаю, cтоит выбирать флексы вместо раскладки на гридах, поэтому можем посмотреть на некоторые случаи, когда флекс — не лучший вариант. Мы уже посмотрели на пример с флексом против грида, где элементы выровнены по горизонтали и вертикали в отличие от элементов, которые занимают место построчно. И это различие стоит учитывать в первую очередь.

Вот пример грида с двумерной раскладкой. Раскладка одновременно и в строках, и в колонках. Пример на флексах — это одномерная раскладка. Мы позволили перенос флекс-строк, но распределение места на строке ведётся построчно. Каждая строка естественно ведёт себя как новый флекс-контейнер по направлению главной оси.

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

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

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

See the Pen Smashing Flexbox Series 4: wrapped flex items with percentage widths by rachelandrew (@rachelandrew) on CodePen.

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

А вот и всё!

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

Это перевод статьи Рейчел Эндрю «Use Cases For Flexbox».

Web-разработка • HTML и CSS

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

.flex-container {
    display: flex; /* контейнер как блочный элемент */
}
.flex-container {
     display: inline-flex; /* контейнер как строчный элемент */
}

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

<section>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum dolor sit amet</div>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum dolor sit amet</div>
    <div>Lorem ipsum</div>
</section>

section {
    display: flex;
    padding: 10px;
    background: #eee;
    width: 800px;
    height: 300px;
}
    section > div {
        box-sizing: border-box;
        padding: 10px;
        color: #fff;
    }
    section > div:nth-child(odd) {
        background: #9f9;
    }
    section > div:nth-child(even) {
        background: #f99;
    }

Направление выстраивания flex-элементов

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

.flex-container {
    display: flex;
    flex-direction: row; /* по умолчанию — row (вправо) */
}

Другие значения свойства flex-direction — row-reverse (влево), column (вниз), column-reverse (вверх).

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

Чтобы разрешить перенос flex-элементов на новые линии (если им не хватает места в текущей линии):

.flex-container {
    display: flex;
    flex-wrap: wrap; /* по умолчанию — nowrap, перенос запрещен */
}

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

.flex-container {
    display: flex;
    flex-flow: row wrap;
}

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

Выравнивание элементов вдоль главной оси

Свойство justify-content помогает распределить лишнее свободное пространство, когда все элементы имеют фиксированный размер или достигли своего максимального размера.

.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start; /* по умолчанию — flex-start, относительно начала оси */
}

Другие значения свойства justify-content:

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

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

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

.flex-container {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch; /* по умолчанию — stretch, растягиваются по всей длине поперечной оси */
}

Другие значения свойства align-items:

flex-start — относительно начала поперечной оси
flex-end — относительно конца поперечной оси
baseline — относительно базовой линии
center — по центру

Свойство align-self, заданное для определенного элемента, позволяет перезаписать свойство align-items, заданное для всех элементов в контейнере:

.flex-container {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
}
    .flex-container > div:last-child {
        align-self: flex-end;
    }

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

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

.flex-container {
    display: flex;
    flex-flow: row wrap;
    align-content: stretch; /* по умолчанию — stretch, растягиваются по всей длине поперечной оси */
}

Другие значения свойства align-content:

flex-start — относительно начала поперечной оси
flex-end — относительно конца поперечной оси
center — по центру
space-between — равномерно, с одинаковым расстоянием между линиями
space-around — равномерно, но с добавлением половины пространства перед первой линией и после последней

Свойство align-content имеет смысл использовать только тогда, когда flex-элементы во flex-контейнере располагаются на нескольких линиях.

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

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

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

.flex-container {
    display: flex;
}
/* переместим 2-ой элемент в конец */
#flex-element-2 {
    order: 1;
} 
/* переместим 4-ый элемент в начало */
#flex-element-4 {
    order: -1;
}

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

Свойство flex-basis

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

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

Свойство flex-grow

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

<div>
    <div>1</div>
    <div>2</div>   
</div>

.flex-container {
    display: flex;
    width: 600px;
}
    .flex-container > div {
        flex-basis: 30%;
    }

    .flex-container > div:first-child {
        flex-grow: 1;
    } 
    .flex-container > div:last-child {
        flex-grow: 4;
    }

В этом примере flex-элементы расположены на одной линии и в ней есть свободное пространство 240px. После установки значений для свойства flex-grow:

ширина первого элемента будет увеличена на 1/5 часть свободного пространства
ширина первого элемента будет увеличена на 4/5 части свободного пространства

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

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

Свойство flex-shrink

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

<div>
    <div>1</div>
    <div>2</div>   
</div>

.flex-container {
    display: flex;
    width: 400px;
}
    .flex-container > div {
        flex-basis: 300px;
        flex-shrink: 0; /* запрет на уменьшение ширины */
    }

    .flex-container > div:first-child {
        flex-shrink: 1;
    } 
    .flex-container > div:last-child {
        flex-shrink: 3;
    }

Ширина flex-контейнера 400px, для отображения flex-элементов необходимо 600px, не хватает 200px. После установки значений больше нуля, уменьшаться могут оба элемента:

ширина первого элемента будет уменьшена на 1/4 от тех 200px, которых не хватает
ширина второго элемента будет уменьшена на 3/4 от тех 200px, которых не хватает

Значение свойства по умолчанию равно единице. Нулевое значение запрещает уменьшение ширины элемента.

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

.flex-element {
    flex: 0 1 auto; /* flex-grow: 0; flex-shrink: 1; flex-basis: auto; */
}

Макет страницы на Flexbox

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Макет Flexbox</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <header>
            <p>Header</p>
        </header>
        <main>
            <article>
                <h2>Lorem Ipsum</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</p>
            </article>
            <nav>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            </nav>
            <aside>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            </aside>
        </main>
        <footer>
            <p>Footer</p>
        </footer>
    </body>
</html>

/* Верстка по принципу mobile first, для больших экранов медиа-запрос */

* {
    box-sizing: border-box;
}
html, body {
    padding: 0;
    margin: 0;
}

body {
    /* flex-контейнер для <header>, <main> и <footer> */
    display: flex;
    /* flex-элементы <header>, <main> и <footer> выстаиваются по вертикали */
    flex-direction: column;
    /* вся высота viewport браузера */
    min-height: 100vh;
}
    header {
        /* не может увеличиваться или уменьшаться, всегда 100px */
        flex: 0 0 100px;
    }
    main {
        /*
        может как увеличиваться, так и уменьшаться, чтобы вместе с
        <header> и <footer> занять всю высоту viewport браузера
        */
        flex: 1 1 auto;
        /* flex-контейнер для <article>, <nav> и <aside> */
        display: flex;
        /*
        на маленьких экранах flex-элементы <article>, <nav> и <aside> выстаиваются
        по вертикали; для больших экранов отдельный media-запрос
        */
        flex-direction: column;
    }
        article {
            /* базовый размер 50%, может увеличиваться или уменьшаться */
            flex: 2 2 50%;
        }
        nav, aside {
            /* базовый размер 25%, могут увеличиваться или уменьшаться */
            flex: 1 1 25%;
        }
        nav {
            /* будет первым, хотя в html-коде идет вторым */
            order: -1;
        }
    footer {
        /* не может увеличиваться или уменьшаться, всегда 100px */
        flex: 0 0 100px;
    }

@media screen and (min-width: 800px) { /* медиа-запрос для больших экранов */
    main {
        /* на больших экранах <article>, <nav> и <aside> выстаиваются по горизонтали */
        flex-direction: row;
    }
        article {
            /* отступ слева и справа, чтобы отделить левую и правую колонки */
            padding: 0 1em 0 1em;
        }
}

Поиск: CSS • HTML • Web-разработка • Верстка • Flexbox • flex-direction • justify-content • align-items • align-self • align-content • order • flex-basis • flex-grow • flex-shrink • Контейнер • Элемент

CSS Flexbox Items

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

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

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

Пример

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

Свойства гибкого элемента:

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

Свойство order определяет порядок гибкие элементы.

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

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

Пример

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

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

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

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

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

Пример

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

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

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

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

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

Пример

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

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

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

Свойство flex-base определяет начальную длину гибкого элемента.

Пример

Установите начальную длину третьего гибкого элемента на 200 пикселей:

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

Гибкое свойство

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

Пример

Сделайте третий гибкий элемент нерастяжимым (0), не усаживающимся (0) и с начальная длина 200 пикселей:

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

Свойство align-self

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

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

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

Пример

Выровняйте третий гибкий элемент в середине контейнера:

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

Пример

Выровняйте второй гибкий элемент по верхней части контейнера, а третий гибкий элемент по дно контейнера:

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

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

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

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

Две оси flexbox

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

Главная ось

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В приведенном ниже живом примере 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 , а также измените второе на обернуть и обернуть .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Руководство по Flexbox

Введение

Flexbox, также называемый модулем Flexible Box Module, является одной из двух современных систем макетов наряду с CSS Grid.

По сравнению с CSS Grid (которая является двумерной), flexbox представляет собой модель одномерного макета . Он будет управлять макетом на основе строки или столбца, но не вместе одновременно.

Основная цель flexbox — позволить элементам заполнить все пространство, предлагаемое их контейнером, в зависимости от некоторых установленных вами правил.

Если вам не нужна поддержка старых браузеров, таких как IE8 и IE9, Flexbox — это инструмент, позволяющий забыть об использовании

Макеты стола
Поплавки
clearfix хаки
дисплей: стол хаки

Давайте погрузимся в flexbox и станем им мастером за очень короткое время.

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

На момент написания (февраль 2018 г.) его поддерживали 97,66% пользователей, все самые важные браузеры реализуют его на протяжении многих лет, поэтому охватываются даже старые браузеры (включая IE10 +):

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

Включить Flexbox

Макет флексбокса применяется к контейнеру путем установки

или

содержимое внутри контейнера будет выровнено с помощью flexbox.

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

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

изгиб
justify-content
align-items
гибкая пленка
гибкий поток

Выровнять строки или столбцы

Первое свойство, которое мы видим, flex-direction , определяет, должен ли контейнер выравнивать свои элементы как строки или как столбцы:

flex-direction: row размещает элементы как строку в направлении текста (слева направо для западных стран)
flex-direction: row-reverse размещает элементы точно так же, как row , но в противоположном направлении
flex-direction: столбец помещает элементы в столбец , упорядочивая сверху вниз
flex-direction: column-reverse помещает элементы в столбец, как и column , но в противоположном направлении

Центровка по вертикали и горизонтали

По умолчанию элементы начинаются слева, если flex-direction — это строка , и сверху, если flex-direction — столбец .

Вы можете изменить это поведение, используя justify-content для изменения горизонтального выравнивания и align-items для изменения вертикального выравнивания.

Изменить горизонтальное выравнивание

justify-content имеет 5 возможных значений:

flex-start : выровняйте по левой стороне контейнера.
гибкий конец : выровняйте по правой стороне контейнера.
центр : выровнять по центру контейнера.
пробел между ними : отображение с равным интервалом между ними.
вокруг них : отображение с равным интервалом вокруг них

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

align-items имеет 5 возможных значений:

flex-start : выровняйте по верху контейнера.
гибкий конец : выровняйте по дну контейнера.
центр : выровняйте по вертикальному центру контейнера.
baseline : отображение на базовой линии контейнера.
stretch : элементы растягиваются по размеру контейнера.

Примечание к исходному уровню

baseline выглядит похоже на flex-start в этом примере из-за того, что мои коробки слишком просты. Ознакомьтесь с этим Codepen, чтобы получить более полезный пример, который я разветвил на основе Pen, изначально созданного Мартином Михалеком. Как видите, размеры предметов выровнены.

Обертка

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

Чтобы элементы распределялись по нескольким строкам, используйте flex-wrap: wrap . Это распределит элементы в соответствии с порядком, установленным в flex-direction . Используйте flex-wrap: wrap-reverse , чтобы изменить этот порядок в обратном порядке.

Сокращенное свойство flex-flow позволяет указать flex-direction и flex-wrap в одной строке, добавив сначала значение flex-direction , а затем значение flex-wrap , например: flex-flow: row wrap .

Свойства, применимые к каждому отдельному элементу

С этого момента мы рассмотрели свойства, которые можно применить к контейнеру.

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

заказать
самоцентрирование
гибкий рост
гибкая термоусадочная
гибкая основа
гибкий

Давайте посмотрим на них подробнее.

Перемещение товаров до / после другого с использованием заказа

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

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

Вертикальное выравнивание с помощью align-self

Элемент может выбрать переопределить контейнер align-items , используя align-self , который имеет те же 5 возможных значений align-items :

flex-start : выровняйте по верху контейнера.
гибкий конец : выровняйте по дну контейнера.
центр : выровняйте по вертикальному центру контейнера.
baseline : отображение на базовой линии контейнера.
stretch : элементы растягиваются по размеру контейнера.

При необходимости увеличьте или уменьшите предмет

гибкий рост

Значение по умолчанию для любого элемента — 0.

Если все элементы определены как 1, а один определен как 2, более крупный элемент займет пространство двух элементов с цифрой «1».

гибкая термоусадочная

По умолчанию для любого элемента 1.

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

гибкая основа

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

Если установлено значение 0, дополнительное пространство для элемента не добавляется при расчете макета.

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