flex
====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
Описание
--------

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

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `flex-grow`: `0`
* `flex-shrink`: `1`
* `flex-basis`: `auto`
 |
| Применяется к | flex-элементы, в том числе в потоке псевдоэлементов |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `flex-grow`: как указано
* `flex-shrink`: как указано
* `flex-basis`: как указано, но с относительной длиной, конвертируемой в абсолютные длины
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `flex-grow`: число
* `flex-shrink`: число
* `flex-basis`: длина, проценты или calc();
 |

Для более полной информации читайте Использование flex-контейнеров CSS (en-US).

Синтаксис
---------


```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                                                | (en-US)  
  [ (en-US) <'flex-grow'> <'flex-shrink'>? (en-US) || (en-US) <'flex-basis'> ] (en-US)    
  
```

Пример
------


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



```html
<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;
}
```

### Результат

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-property |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Using CSS flexible boxes (en-US)