flex

Описание

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

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

Для более полной информации читайте Using CSS flexible boxes.

Синтаксис

/* 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'>: Defines the flex-grow of the flex item. See <number> for more details. Negative values are considered invalid. Defaults to 1 when omitted.
<'flex-shrink'>: Defines the flex-shrink of the flex item. See <number> for more details. Negative values are considered invalid. Defaults to 1 when omitted.
<'flex-basis'>: Defines the flex-basis of the flex item. Any value valid for width and height properties are accepted. A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0% when omitted.
none: Ключевое слово, эквивалентое значению 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

Особенность	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	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] To activate flexbox support for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

^[2] Multi-line flexbox are supported since Firefox 28.

^[3] Internet Explorer 10-11 (but not 12+) ignores uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info.

^[4] In Internet Explorer 10-11 (but not 12+), a flex declaration with a unitless value in its flex-basis part is considered syntactically invalid and will thus be ignored. A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.

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

Using CSS flexible boxes