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: 30%;
flex: min-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

Размер элемента устанавливается в соответствии с его свойствами width и height. Он полностью негибкий: не сжимается и не увеличивается по отношению к гибкому контейнеру. Эквивалентно значению "flex: 0 0 auto".

Формальный синтаксис

flex = 
 none | 
 [ <'flex-grow'> <'flex-shrink'> ? || <'flex-basis'> ] 

<flex-grow> = 
 <number [0,∞]> 

<flex-shrink> = 
 <number [0,∞]> 

<flex-basis> = 
 content | 
 <'width'> 

<width> = 
 auto | 
 <length-percentage [0,∞]> | 
 min-content | 
 max-content | 
 fit-content( <length-percentage [0,∞]> ) | 
 <calc-size()> | 
 <anchor-size()> | 
 stretch | 
 fit-content | 
 contain 

<length-percentage> = 
 <length> | 
 <percentage> 

<calc-size()> = 
 calc-size( <calc-size-basis> , <calc-sum> ) 

<anchor-size()> = 
 anchor-size( [ <anchor-name> || <anchor-size> ] ? , <length-percentage>? ) 

<calc-size-basis> = 
 <size-keyword> | 
 <calc-size()> | 
 any | 
 <calc-sum> 

<calc-sum> = 
 <calc-product> [ [ '+' | '-' ] <calc-product> ] * 

<anchor-name> = 
 <dashed-ident> 

<anchor-size> = 
 width | 
 height | 
 block | 
 inline | 
 self-block | 
 self-inline 

<calc-product> = 
 <calc-value> [ [ '*' | / ] <calc-value> ] * 

<calc-value> = 
 <number> | 
 <dimension> | 
 <percentage> | 
 <calc-keyword> | 
 ( <calc-sum> ) 

<calc-keyword> = 
 e | 
 pi | 
 infinity | 
 -infinity | 
 NaN 

Пример

#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;
}

Результат

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

Совместимость с браузерами

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

• Using CSS flexible boxes