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
Animatable	as each of the properties of the shorthand: `flex-grow`: yes, as a number `flex-shrink`: yes, as a number `flex-basis`: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a `calc()` function that is the sum of a length and a percentage (each possibly zero), and these `calc()` functions have each half interpolated as real numbers.
Canonical order	order of appearance in the formal grammar of the values

Перегляньте Using CSS flexible boxes задля більш детальної інформації та опису властивостей.

Синтаксис

/* 0 0 auto */
flex: none;

/* Одне значення, ціле число: flex-grow */
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: 2 2;

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

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

Значення

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

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

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

Using CSS flexible boxes