CSS свойство flex

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

Свойство представляет собой сокращённую запись свойств flex-grow, flex-shrink и flex-basis. Значение по умолчанию: «flex: 0 1 auto;«. Можно указывать как одно, так и все три значения свойств.

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

Внимание: Если элемент не является флекс-элементом, то свойство flex не будет иметь эффекта.

CSS синтаксис

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

Возможные значения

Значение	Описание
flex-grow	Коэффициент растяжения. Коэффициент увеличения ширины флекс-элемента относительно других флекс-элементов.
flex-shrink	Коэффициент сужения. Коэффициент уменьшения ширины флекс-элемента относительно других флекс-элементов.
flex-basis	Базовая ширина флекс-элемента.
auto	Эквивалентно «flex: 1 1 auto;«.
none	Эквивалентно «flex: 0 0 auto;«.
inherit	Значение наследуется от родительского элемента.
initial	Эквивалентно «flex: 0 1 auto;«.

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

Устанавливаем единую длину для всех флекс-элементов не зависимо от их содержимого

 #main div < -webkit-flex: 1; /* Safari 6.1+ */ -ms-flex: 1; /* IE 10 */ flex: 1; >

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: 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 становятся в один столбик и становятся равными по ширине. Почему вышеприведенная запись означает это?

Свойства flex-элементов

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

Значения

.flex-item < order: ; >

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

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

flex-grow

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

Значения

.flex-item < flex-grow: ; >

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

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

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

Отрицательные числа недопустимы.

flex-shrink

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

Значения

.flex-item < flex-shrink: ; >

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

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

Отрицательные числа недопустимы.

flex-basis

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

Значения

.flex-item < flex-basis: auto | ; >

flex-basis указан для четвёртого flex-элемента и диктует его начальный размер.

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

flex

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

Значения

.flex-item < flex: none | auto | [ ? || ]; >

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

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

align-self

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

Значения

.flex-item

Для третьего и четвёртого flex-элементов переопределено выравнивание через свойство align-self .

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

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

Замечания

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

См. также

• align-self
• flex-basis
• flex-grow
• flex-shrink
• order
• Адаптивный макет на флексбоксах
• Выравнивание с помощью флексбоксов
• Макет сайта на флексбоксах
• Создание медиа-объектов
• Создание флексбоксов
• Точки между слов