MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

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

Initial valueas each of the properties of the shorthand:
Applies toflex items, including in-flow pseudo-elements
Inheritedno
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder 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>

Результат

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

Специфікація Стан Коментар
CSS Flexible Box Layout Module
The definition of 'flex' in that specification.
Candidate Recommendation Загальне визначення

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

Підтримка 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 задля більш детільного опису.

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

Мітки документа й учасники

 Зробили внесок у цю сторінку: piton13, Kamilius
 Востаннє оновлена: piton13,