flex

Описание

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

Для более полной информации читайте Использование flex-контейнеров CSS.

Синтаксис

/* 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'>

Определяет flex-grow для флекс элемента. Смотри <number> для большей информации. Негативные значения считаются не валидными. Значение по-умолчанию  1, если не указано.

<'flex-shrink'>

Определяет flex-shrink для флекс элемента. Смотри <number> для большей информации. Негативные значения считаются не валидными. Значение по-умолчанию  1, если не указано.

<'flex-basis'>

Определяет flex-basis для флекс элемента. Любое валидное значение для высоты(height) и ширины(width) - валидно и для данного свойства. Предпочтительный размер 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;
}

Результат

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

Поддержка браузерами

^[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