flex

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

Описание

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

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

Для более полной информации читайте Using CSS flexible boxes.

Синтаксис

/* 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'>
Defines the flex-grow of the flex item. See <number> for more details. Negative values are considered invalid. Defaults to 1 when omitted.
<'flex-shrink'>
Defines the flex-shrink of the flex item. See <number> for more details. Negative values are considered invalid. Defaults to 1 when omitted.
<'flex-basis'>
Defines the flex-basis of the flex item. Any value valid for width and height properties are accepted. A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0% when omitted.
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
Basic support 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.

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

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

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