CSS-свойство flex

Свойство flex определяет компоненты гибкой длины. Это сокращённая запись следующих свойств:

Все три компонента являются необязательными в сокращённом объявлении. Если они не указаны, flex-grow по умолчанию равно 1, flex-shrink — 1, а flex-basis — auto. Обратите внимание, что коэффициент flex-shrink умножается на значение flex-basis при распределении отрицательного пространства.

Свойство flex входит в число свойств CSS3.

Это свойство является частью модуля Flexible Box Layout. Если гибких элементов нет, свойство flex не окажет никакого эффекта.

Ключевое слово auto эквивалентно 1 1 auto. Оно задаёт размер элемента на основе свойств width/height. Если основное размерное свойство элемента установлено в auto, размер flex-элемента определяется его содержимым.

Ключевое слово initial эквивалентно 1 0 auto. Оно задаёт размер элемента на основе его свойств ширины/высоты (или содержимого, если они не заданы). Это делает flex-элемент негибким при наличии свободного пространства и не позволяет ему сжиматься при его нехватке. Для выравнивания flex-элементов по главной оси используются техники выравнивания или автоматические отступы.

Ключевое слово none эквивалентно 0 0 auto. Оно задаёт размер элемента в соответствии со свойствами width и height. Элемент полностью негибкий.

Информация

Примечание: начальные значения flex-grow и flex-shrink отличаются от их значений по умолчанию, когда они не включены в сокращённое объявление flex, чтобы лучше охватывать распространённые случаи.

Начальное значение	0 1 auto
Применяется к	Flex-элементам, включая псевдоэлементы в потоке.
Наследуется	Нет.
Анимируется	Да.
Версия	CSS3
DOM-синтаксис	Object.style.flex = "1";

Синтаксис

Синтаксис CSS-свойства flex

flex: flex-grow | flex-shrink | flex-basis | auto | initial | inherit;

Значения можно указывать в любом порядке. При использовании flex-basis можно также применять ограничения min-width или min-height, чтобы элемент не уменьшался ниже заданного размера.

Пример свойства flex:

Пример CSS-свойства flex

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 350px;
        height: 200px;
        padding-left: 0;
        list-style-type: none;
        border: 1px dashed black;
        display: flex;
      }
      .box div {
        flex: 1;
      }
      .green {
        background-color: #8ebf42;
      }
      .blue {
        background-color: #1c87c9;
      }
      .gray {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Flex property example</h2>
    <div class="box">
      <div class="green">GREEN</div>
      <div class="blue">BLUE</div>
      <div class="gray">GRAY</div>
    </div>
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства flex со значением "flex-grow":

Пример CSS-свойства flex со значением flex-grow

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 1px solid #666;
        display: flex;
      }
      .box div:nth-of-type(1) {
        flex-grow: 1;
      }
      .box div:nth-of-type(2) {
        flex-grow: 4;
      }
      .box div:nth-of-type(3) {
        flex-grow: 1;
      }
      .box div:nth-of-type(4) {
        flex-grow: 1;
      }
      .box div:nth-of-type(5) {
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <h2>Flex-grow example</h2>
    <div class="box">
      <div style="background-color: #eee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #ccc;"></div>
      <div style="background-color: #666;"></div>
    </div>
  </body>
</html>

Попробуйте сами »

Пример свойства flex со значением "flex-shrink":

Пример CSS-свойства flex со значением flex-shrink

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 1px solid #666;
        display: flex;
      }
      .box div {
        flex-grow: 1;
        flex-shrink: 2;
        flex-basis: 100px;
      }
      
      .box div:nth-of-type(2) {
        flex-shrink: 5;
      }
    </style>
  </head>
  <body>
    <h2>Flex-shrink example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #cccccc;"></div>
      <div style="background-color: #666666;"></div>
    </div>
  </body>
</html>

Попробуйте сами »

Распространённые шаблоны сокращённой записи

Несколько значений flex встречаются настолько часто, что их стоит запомнить:

flex: 1 (= 1 1 0) — элемент свободно растёт и сжимается, начиная с базового размера 0. Примените ко всем дочерним элементам, чтобы разделить контейнер на равные по ширине колонки независимо от содержимого.
flex: auto (= 1 1 auto) — растёт и сжимается, но начальный размер определяется содержимым элемента или его свойством width. Элементы делят оставшееся пространство, сохраняя естественные пропорции.
flex: none (= 0 0 auto) — фиксированный, негибкий элемент. Используйте для боковой панели или кнопки, которая должна сохранять свой размер, пока соседние элементы гибко изменяются.
flex: 0 0 200px — фиксировано на 200px: элемент не растёт и не сжимается, что удобно для колонки с фиксированной шириной.

Распространённая ошибка: flex: 1 использует flex-basis равный 0, поэтому внутренняя ширина содержимого игнорируется и колонки становятся действительно равными. Если вместо этого нужны колонки, размер которых определяется содержимым, но они всё же могут растягиваться, используйте flex: auto.

Значения

Значение	Описание
flex-grow	Определяет, насколько элемент будет увеличиваться относительно остальных гибких элементов того же контейнера.
flex-shrink	Определяет, насколько элемент будет уменьшаться относительно остальных гибких элементов того же контейнера.
flex-basis	Задаёт длину элемента как "auto", "inherit" или число с единицей "%", "px", "em" и т. д.
auto	Эквивалентно 1 1 auto.
initial	Эквивалентно 1 0 auto.
none	Эквивалентно 0 0 auto.
inherit	Наследует это свойство от родительского элемента.

Практика

Какие свойства относятся к CSS Flex-контейнеру?