flex

Загальний огляд

CSS параметр flex є скороченим записом властивості, котра визначає здатність flex елемента змінювати свої розміри аби заповнити наявний простір. Flex елементи можна розтягнути аби використати увесь наявний простір пропорційно до вказаного параметра flex-grow, або flex-shrink аби запобігти виходу за межі батьківського контейнера.

Initial value	as each of the properties of the shorthand: `flex-grow`: `0` `flex-shrink`: `1` `flex-basis`: `auto`
Applies to	flex items, including in-flow pseudo-elements
Inherited	no
Media	visual
Computed value	as each of the properties of the shorthand: `flex-grow`: as specified `flex-shrink`: as specified `flex-basis`: as specified, but with relative lengths converted into absolute lengths
Animation type	as each of the properties of the shorthand: `flex-grow`: a number `flex-shrink`: a number `flex-basis`: a length, percentage or calc();
Canonical order	order of appearance in the formal grammar of the values

Перегляньте Використання гнучких CSS контейнерів для більш детальної інформації та опису властивостей.

Синтаксис

/* 0 0 auto */
flex: none;

/* Одне значення, ціле число: flex-grow (flex-basis змінюється на 0) */
flex: 2;

/* Одне значення, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;

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

/* Два значення: flex-grow | flex-shrink (flex-basis змінюється на 0) */
flex: 2 2;

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

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

Значення

<'flex-grow'>: Визначає ширину flex елемента відносно ширин всіх сусідніх елементів. Перегляньте <number> задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.
<'flex-shrink'>: Визначає flex-shrink flex елемента. Перегляньте <number> задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.
<'flex-basis'>: Визначає базис flex елемента. Може приймати будь-яке значення, з тих, що можуть приймати параметри width і height. Значення 0 має мати одиницю виміру, аби уникнути трактування його, як значення гнучкості. Приймає значення 0%, коли воно не вказується явно.
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 The definition of 'flex' in that specification.	Candidate Recommendation	Загальне визначення

Сумісність із браузерами

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!

Desktop
Mobile

Підтримка	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Базова підтримка	18.0 (18.0)^[1] 20.0 (20.0) 28.0 (28.0)^[2]	21.0-webkit 29.0	10.0-ms^[3] 11.0^[3]	12.10	6.1-webkit 9.0

Підтримка	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Базова підтримка	?	4.4	11	12.10	7.1-webkit

[1] В Gecko 18.0 (Firefox 18.0 / Thunderbird 18.0 / SeaMonkey 2.15) та 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16) підтримка flexbox прихована за налаштуванням about:config пунктом layout.css.flexbox.enabled, котрий по замовчуванню - false.

[2] Багатостроковий flexbox підтримується починаючи з Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25).

В додаток до підтримки непрефіксованого flexbox, у Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) додано підтримку -webkit префіксованої версії властивості з огляду на веб-сумісність з налаштуванням layout.css.prefixes.webkit, котре по замовчуванню дорівнює false. Починаючи з версії Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) це налаштування дорівнює true.

[3] Internet Explorer 10-11 (але не 12+) ігнорує вживання calc() у частині flex синтаксису, що відповідає за властивість flex-basis. Це можна обійти використанням не сокроченого, а повного запису цієї властивості. Перегляньте Flexbug #8 задля більш детального опису. Визначення flex зі значенням без одиниці виміру у частині, що відповідає за flex-basis вважається синтаксично не вірною у цих версіях, а тому її буде проігноровано. Виправити це можна - завжди додаючи одиницю виміру у частині властивості, що відповідає за flex-basis, скороченого запису flex. Перегляньте Flexbug #4 задля більш детільного опису.

Також варто переглянути

Використання гнучких CSS блоків