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

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Описание

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

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется кflex-элементы, в том числе в потоке псевдоэлементов
Наследуетсянет
Отображениевизуальный
Обработка значениякак и у каждого из подсвойств этого свойства:
  • flex-grow: как указано
  • flex-shrink: как указано
  • flex-basis: как указано, но с относительной длиной, конвертируемой в абсолютные длины
Animation typeкак и у каждого из подсвойств этого свойства:
Канонический порядокпорядок появления в формальной грамматике значений

Для более полной информации читайте Использование 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>

Результат

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

Спецификация Статус Комментарий
CSS Flexible Box Layout Module
Определение 'flex' в этой спецификации.
Кандидат в рекомендации Initial definition

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

Особенность Firefox (Gecko) Chrome Internet Explorer Opera Safari
Базовая поддержка 18.0 (18.0) (behind a pref) [1] [2]
20.0 (20.0) [2][3]
21.0-webkit
29.0
10.0-ms [3][4]
11.0 [3][4]
12.10 6.1-webkit
Особенность Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support ? 4.4 11 12.10 7.1-webkit

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

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

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

 Внесли вклад в эту страницу: mhaidamashko, MrDaedra, Dolfik, Sebastianz, teoli, ahtohbi4
 Обновлялась последний раз: mhaidamashko,