flex - CSS

Описание

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

Начальное значение	как и у каждого из подсвойств этого свойства: `flex-grow`: `0` `flex-shrink`: `1` `flex-basis`: `auto`
Применяется к	flex-элементы, в том числе в потоке псевдоэлементов
Наследуется	нет
Отображение	визуальный
Обработка значения	как и у каждого из подсвойств этого свойства: `flex-grow`: как указано `flex-shrink`: как указано `flex-basis`: как указано, но с относительной длиной, конвертируемой в абсолютные длины
Animation type	как и у каждого из подсвойств этого свойства: `flex-grow`: число `flex-shrink`: число `flex-basis`: длина, проценты или calc();
Канонический порядок	порядок появления в формальной грамматике значений

Для более полной информации читайте Использование flex-контейнеров CSS.

Синтаксис

/* 0 0 auto */
flex: none;

/* Одно значение, число без единиц: flex-grow */
flex: 2;

/* Одно значение, ширина/высота: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;

/* Два значения: flex-grow | flex-basis */
flex: 1 30px;

/* Два значения: flex-grow | flex-shrink */
flex: 2 2;

/* Три значения: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Глобальные значения */
flex: inherit;
flex: initial;
flex: unset;

Значения

<'flex-grow'>: Определяет flex-grow для флекс элемента. Смотри <number> для большей информации. Негативные значения считаются недействительными. Значение по умолчанию 0, если не указано.
<'flex-shrink'>: Определяет flex-shrink для флекс элемента. Смотри <number> для большей информации. Негативные значения считаются недействительными. Значение по умолчанию 1, если не указано.
<'flex-basis'>: Определяет flex-basis для флекс элемента. Любое корректное значение для высоты(height) и ширины(width) - корректно и для данного свойства. Предпочтительный размер 0 должен иметь единицу измерения, чтобы не восприниматься как гибкий. Значение по умолчанию 0%, если не указано.
none: Размер элемента устанавливается в соответствии с его свойствами width и height. Он полностью негибкий: не сжимается и не увеличивается по отношению к гибкому контейнеру. Эквивалентно значению "flex: 0 0 auto".
Формальный синтаксис

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

Пример

#flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
}

#flex-container > .flex-item {
	-webkit-flex: auto;
	flex: auto;
}

#flex-container > .raw-item {
	width: 5rem;
}

<div id="flex-container">
    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
    <div class="raw-item" id="raw">Raw box</div>
</div>

var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
	raw.style.display = raw.style.display == "none" ? "block" : "none";
});

#flex-container {
	width: 100%;
	font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
	border: 1px solid #f00;
	padding: 1rem;
}

#flex-container > .raw-item {
	border: 1px solid #000;
}

Результат

Спецификации

Спецификация	Статус	Комментарий
CSS Flexible Box Layout Module Определение 'flex' в этой спецификации.	Кандидат в рекомендации	Initial definition

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Настольные
Мобильные

Особенность	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Базовая поддержка	18.0 (18.0) (behind a pref) ^{[1] [2]} 20.0 (20.0) ^[2][3]	21.0-webkit 29.0	10.0-ms ^[3]^[4] 11.0 ^[3]^[4]	12.10	6.1-webkit

Особенность	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	4.4	11	12.10	7.1-webkit

^[1] Для активации flexbox для Firefox 18 и 19 пользователю неободимо внести следующее изменение:
свойство конфигурации "layout.css.flexbox.enabled" вtrue.

^[2] Multi-line flexbox поддерживается Firefox 28.

^[3] Internet Explorer 10-11 (кроме 12+) игонорируют использование calc() во flex-basis части flex синтаксиса. Это можно обойти, используя свойства longhand вместо сокращения. Дополнительную информацию см. В Flexbug # 8.

^[4] В Internet Explorer 10-11 (кроме 12+), объявление flex без единичного значения в его flex-basis части считается синтаксически недействительным и поэтому игнорируется. Обходной путь состоит в том, чтобы всегда включать единицу в flex-basis часть flex . Дополнительную информацию см. В Flexbug #4.

Смотрите также

Using CSS flexible boxes