flex

Описание

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

Для более полной информации читайте Использование 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> для большей информации. Негативные значения считаются не валидными. Значение по-умолчанию  0, если не указано.

<'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]  Для активации flexbox для Firefox 18 и 19 пользователю неободимо внести следующее изменение:
свойство конфигурации "layout.css.flexbox.enabled" вtrue.

^[2] Multi-line flexbox поддерживается Firefox 28.

^[3] Internet Explorer 10-11 (кроме 12+) игонорируют использование calc() во flex-basis части flex синтаксиса. Это можно обойти, используя свойства longhand вместо сокращения. Дополнительную информацию см. В Flexbug # 8.

^[4] В Internet Explorer 10-11 (кроме 12+),  объявление flex без единичного значения в его flex-basis части считается синтаксически недействительным и поэтому игнорируется. Обходной путь состоит в том, чтобы всегда включать единицу в flex-basis часть flex . Дополнительную информацию см. В Flexbug #4.

Смотрите также

• Using CSS flexible boxes