CSS свойство flex

Свойство flex определяет компоненты гибкой длины. Это сокращенное свойство для flex-grow, flex-shrink и flex-basis. Flex-shrink и flex-basis — дополнительные свойства, т. е. нет необходимости включать их в объявление flex.

Свойство flex является частью модуля макета гибкого контейнера. Если нет гибких элементов, свойство flex не будет иметь эффекта.

Если не включать свойство flex-grow в сокращенное объявление, значение будет равно 1 по умолчанию. Если не включать свойство flex-shrink в сокращенное объявление, значение будет равно 1 по умолчанию. Фактор свойства flex-shrink увеличивается с помощью flex-basis, когда есть распределенное отрицательное пространство. Когда свойство flex-basis не включено в сокращенное объявление, будет задано значение 0%.

«Auto» — значение по умолчанию свойства flex. Это свойство устанавливает размер элементов на основе свойства width/height. (Если свойство задает основной размер элемента как «auto», это значение устанавливает размер флекс-элемента на основе его контента.)

Значение «initial» устанавливает размер элемента на основе свойства width/height (или на основе контента, если свойства не заданы). При этом значении элемент становится негибким, если доступно свободное пространство, но дает возможность максимально уменьшить элемент в случае недостаточного пространства. Возможности выравнивания и auto margins могут быть использованы для выравнивания флекс-элементов по главной оси.

Значение «none» устанавливает размер элемента на основе свойств width и height. Является полностью негибким.

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

Значение по умолчанию	0 1 auto
Применяется	К флекс-элементам, в том числе в потоке псевдоэлементов.
Наследуется	Нет
Анимируемое	Да.
Версия	CSS3
DOM синтаксис	Object.style.flex = «1»;

Синтаксис

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

Пример

html> html> title>Заголовок документа title> head> style> .box < width: 350px; height: 200px; padding-left: 0; list-style-type: none; border: 1px dashed black; display: -webkit-flex; display: flex; > .box div < flex: 1; > .green background-color: #8ebf42> .blue background-color: #1c87c9;> .gray background-color: #666> style> head> body> h2>Пример свойства flex h2> div class="box"> div class="green">GREEN div> div class="blue">BLUE div> div class="gray">GRAY div> div> body> html>

Пример, где один из элементов имеет другой размер:

Пример

html> html> head> title>Заголовок документа title> style> .box < width: 320px; height: 120px; border: 1px solid #666; display: -webkit-flex; /* Safari */ display: flex; > /* Safari 6.1+ */ .box div:nth-of-type(1) flex-grow: 1;> .box div:nth-of-type(2) flex-grow: 4;> .box div:nth-of-type(3) flex-grow: 1;> .box div:nth-of-type(4) flex-grow: 1;> .box div:nth-of-type(5) flex-grow: 1;> /* Standard syntax */ .example div:nth-of-type(1) flex-grow: 1;> .example div:nth-of-type(2) flex-grow: 4;> .example div:nth-of-type(3) flex-grow: 1;> .example div:nth-of-type(4) flex-grow: 1;> .example div:nth-of-type(5) flex-grow: 1;> style> head> body> h2>Пример flex-grow h2> div class="box"> div style="background-color: #eee;"> div> div style="background-color: #1c87c9;"> div> div style="background-color: #8ebf42;"> div> div style="background-color: #ccc;"> div> div style="background-color: #666;"> div> div> body> html>

Пример с flex-shrink:

Пример

html> html> head> title>Заголовок документа title> style> .box < width: 320px; height: 120px; border: 1px solid #666; display: -webkit-flex; /* Safari */ display: flex; > .box div < -webkit-flex-grow: 1; /* Safari 6.1+ */ -webkit-flex-shrink: 2; /* Safari 6.1+ */ -webkit-flex-basis: 100px; /* Safari 6.1+ */ flex-grow: 1; flex-shrink: 2; flex-basis: 100px; > .box div:nth-of-type(2) < -webkit-flex-shrink: 5; /* Safari 6.1+ */ flex-shrink: 5; > style> head> body> h2>Пример flex-shrink h2> div class="box"> div style="background-color: #eee;"> div> div style="background-color: #1c87c9;"> div> div style="background-color: #8ebf42;"> div> div style="background-color: #ccc;"> div> div style="background-color: #666;"> div> div> body> html>

Значения

Значение	Описание
flex-grow	Определяет сколько должен увеличиваться элемент относительно других гибких элементов того же контейнера.
flex-shrink	Определяет сколько должен уменьшаться элемент относительно других гибких элементов того же контейнера.
flex-basis	Указывает ширину элемента при помощи «auto», «inherit» или чисел, после которых следуют «%», «px», «em» и т. д.
auto	Эквивалентно 1 1 auto.
initial	Эквивалентно 1 0 auto.
none	Эквивалентно 0 0 auto.
inherit	Значение элемента наследуется от родительского элемента

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

29.0+ 21-28 -webkit-

28.0+

9.0+ 6.1-8.0 -webkit-

12.1+

Подробное рассмотрение свойств Flex

От автора: вы когда-нибудь задумывались о том, как работает свойство CSS flex? Это сокращение от flex-grow, flex-shrink и flex-basis. Наиболее распространенный вариант использования, который я вижу в Интернете — flex: 1. Это возможность flex-элемента расширяться и заполнять все доступное пространство.

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

Свойство flex-grow

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

display : flex ;
flex-wrap : wrap ;
flex-grow : 1 ;

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

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

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

Чтобы понять, как рассчитывается ширина flex-элемента, см. уравнение ниже. Я узнал об уравнении из этого поста Саманты Минг (Спасибо!). Рассчитаем размер элемента, содержащего текст «CSS».

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

Flex-grow: коэффициент растяжения для элемента

Total flex-grow: сумма значений flex-grow для всех элементов

Доступное пространство: перед применением flex-grow

Ширина элемента: начальная ширина элемента.

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

Несколько факторов flex-grow

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

Надеюсь, теперь вам стало понятнее.

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

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

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

Flex-grow не делает flex-элементы одинаковыми

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

Если вы хотите, чтобы элементы были одинаковыми по ширине, это можно сделать, используя flex-basis. Я объясню это в следующих разделах.

Свойство flex-shrink

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

Рассмотрим следующий пример. Средний элемент имеет ширину 300px, и установлено flex-shrink: 1. Это позволит элементу уменьшиться в ширину, если нет места для размещения всех flex-элементов.

Исследование CSS-свойства flex

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

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

Свойство flex-grow

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

.wrapper < display: flex; flex-wrap: wrap; >.item

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

Браузер сделает ширину элемента 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-basis: 50%

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

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

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

.item-1

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

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

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

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

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

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

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

Элемент, в котором больше содержимого, будет больше

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

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

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

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

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

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

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

.item

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

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

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

.item

Тут мы в явном виде задаём, соответственно, значения 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

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

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

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

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

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

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

 
  
Ahmad Shadeed
 
Author of Debugging CSS
 
 
 

.user < display: flex; flex-wrap: wrap; align-items: center; >.user__avatar

Обратите внимание на то, что, настраивая элемент 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

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

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

form < display: flex; flex-wrap: wrap; >input < flex: 1; /* Другие стили */ >

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

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

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

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

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

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

 
 
Title short
 
 

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

.card < display: flex; flex-direction: column; >/* Первое решение */ .card__title

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

/* Второе решение */ .card__date

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

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

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

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

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

.actions < display: flex; flex-wrap: wrap; >.actions__item < flex: 2; >.actions__item.user

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

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

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

.palette < display: flex; flex-wrap: wrap; >.palette__item < flex: 1; transition: flex 0.3s ease-out; >.palette__item:hover

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

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

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

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

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

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

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

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

.wrapper < display: flex; >.wrapper img

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

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

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

.wrapper img

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

Итоги

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

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

Объяснение записи flex: 1 1 100%

Что в комплексе означает запись flex: 1 1 100% ?

/* Обнуление */ *, *::before, *::after < padding: 0; margin: 0; border: 0; box-sizing: border-box; >a < text-decoration: none; >ul, ol, li < list-style: none; >img < vertical-align: top; >h1, h2, h3, h4, h5, h6 < font-weight: inherit; font-size: inherit; >html, body < height: 100%; line-height: 1; background: #fafafa; font-size: 14px; color: #252b42; font-weight: 500; font-family: Montserrat; >.wrapper < min-height: 100%; overflow: hidden; display: flex; flex-direction: column; >._container < max-width: 1046px; padding: 0px 15px; margin: 0px auto; box-sizing: content-box; >._ibg < position: relative; >._ibg img < position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; >/* ------------------------------------------------------------------------- */ .header < position:absolute; width: 100%; left: 0; top: 0; z-index: 50; >.header__container < display: flex; min-height: 104px; align-items: center; >@media (max-width: 479px) < .header__container < min-height: 70px; >> .header__logo < font-size: 24px; font-weight: 700; color: inherit; >.header__menu < margin: 0px 0px 0px 133px; >.menu < padding: 5px 0px; >.menu__list < display: flex; flex-wrap: wrap; >@media (max-width: 992px) < .header__menu < margin: 0px 0px 0px 80px; >> @media (max-width: 767px) < .header__menu < margin: 0px 0px 0px 40px; >> @media (max-width: 479px) < .header__menu < margin: 0px 0px 0px 20px; >> .menu__item:not(:last-child) < margin: 0px 21px 0px 0px; >.menu__link < color: #737373; font-weight: 600; line-height: calc(24 / 14*100%); >@media (max-width: 479px) < .menu__link < font-size: 18px; >> /* -------------page----------------------------------------------------------------------- */ .page < flex: 1 1 auto; >/* -------------footer---------------------------------------------------------------------- */ .footer < >/* --------------main-block---------------------------------------------------------------------- */ .main-block < position: relative; >.main-block__container < >.main-block__body < padding: 184px 0px 191px 0px; position: relative; z-index: 2; max-width: 400px; >@media (max-width: 992px) < .main-block__body< padding: 120px 0 191px 0px; >> .main-block__body > *:not(:last-child) < margin: 0px 0px 35px 0px; >.main-block__title < font-size: 58px; line-height: calc(80 / 58 * 100%); letter-spacing: 0.2px; font-weight: 800; >@media (max-width: 479px) < .main-block__title < font-size: 42px; >> .main-block__text < color: #737373; font-size: 20px; line-height: 150%; >.main-block__buttons < display: flex; flex-wrap: wrap; margin: -10px 0px; >.main-block__button < border-radius: 37px; display: flex; min-height: 48px; justify-content: center; align-items: center; letter-spacing: 0.2px; font-weight: 700; line-height: 150%; text-align: center; padding: 0px 36px; margin: 10px 0px; >@media (max-width: 479px) < .main-block__button< flex: 1 1 100%; >> @media (min-width: 479px) < .main-block__button:not(:last-child)< margin-right: 10px; >> .main-block__button_orange < background: #ff7b47; color: #fff; >.main-block__button_border < color: #0d5c63; border: 1px solid #0d5c63; >.main-block__image < position: absolute; width: 100%; height: 100%; top: 0; left: 0; >@media (max-width: 1300px) < .main-block__image img < object-position: right; >> @media (max-width: 992px) < .main-block__image < opacity: 0.5; >>

Relvise
Finance and Consultancy Solution
We know how large objects will act, but things on a small scale.
Get Quote NowLearn More

Что значит запись flex: 1 1 100% в следующем участке css кода

@media (max-width: 479px) < .main-block__button< flex: 1 1 100%; >> @media (min-width: 479px) < .main-block__button:not(:last-child)< margin-right: 10px; >>

Нужна детальная расшифровка, поскольку я новичок. На видеуроке по адаптивной верстке на 1:45:00-1:47:30 показано, что при вышеприведенной верстке при уменьшении экрана кнопки Get Quote Now и Learn More становятся в один столбик и становятся равными по ширине. Почему вышеприведенная запись означает это?