flex

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

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

Initial value (en-US)	as each of the properties of the shorthand: `flex-grow`: `0` flex-shrink (en-US): `1` flex-basis (en-US): `auto`
Applies to	flex items, including in-flow pseudo-elements
Inherited (en-US)	no
Computed value (en-US)	as each of the properties of the shorthand: `flex-grow`: as specified flex-shrink (en-US): as specified flex-basis (en-US): 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 (en-US): a number flex-basis (en-US): a length, percentage or calc();

Перегляньте Використання гнучких 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> (en-US) задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.
<'flex-shrink'>: Визначає flex-shrink flex елемента. Перегляньте <number> (en-US) задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.
<'flex-basis'>: Визначає базис flex елемента. Може приймати будь-яке значення, з тих, що можуть приймати параметри width і height. Значення 0 має мати одиницю виміру, аби уникнути трактування його, як значення гнучкості. Приймає значення 0%, коли воно не вказується явно.
none: Ключове слово, котре по значенню рівне 0 0 auto.
Формальний синтаксис

none | (en-US) [ (en-US) <'flex-grow'> <'flex-shrink'> (en-US)? (en-US) || (en-US) <'flex-basis'> (en-US) ] (en-US)

Приклад

#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>

Результат

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

Специфікація	Стан	Коментар
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! (en-US)

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 (en-US) 29.0	10.0-ms (en-US)^[3] 11.0^[3]	12.10	6.1-webkit (en-US) 9.0

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

[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 блоків

flex

Формальний синтаксис