We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

Описание

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

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

Результат

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

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

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Особенность 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]  Для активации 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.

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

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

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