w3docs logo

CSS свойство flex

Свойство flex определяет компоненты гибкой длины. Это сокращенное свойство для flex-grow, flex-shrink и flex-basis. Flex-shrink и flex-basis - дополнительные свойства, т. е. нет необходимости включать их в объявление flex.

Свойство flex является частью модуля макета гибкого контейнера. Если нет гибких элементов, свойство flex не будет иметь эффекта.

Если не включать свойство flex-grow в сокращенное объявление, значение будет равно 1 по умолчанию. Если не включать свойство flex-shrink в сокращенное объявление, значение будет равно 1 по умолчанию. Фактор свойства flex-shrink увеличивается с помощью flex-basis, когда есть распределенное отрицательное пространство. Когда свойство flex-basis не включено в сокращенное объявление, будет задано значение 0%.

"Auto" - значение по умолчанию свойства flex. Это свойство устанавливает размер элементов на основе свойства width/height. (Если свойство задает основной размер элемента как "auto", это значение устанавливает размер флекс-элемента на основе его контента.)

Значение "initial" устанавливает размер элемента на основе свойства width/height (или на основе контента, если свойства не заданы). При этом значении элемент становится негибким, если доступно свободное пространство, но дает возможность максимально уменьшить элемент в случае недостаточного пространства. Возможности выравнивания и auto margins могут быть использованы для выравнивания флекс-элементов по главной оси.

Значение "none" устанавливает размер элемента на основе свойств width и height. Является полностью негибким.

Примечание: Начальные значения свойств flex-grow и flex-shrink отличаются от их значений по умолчанию, когда они не включены в сокращенное объявление flex.
Значение по умолчанию 0 1 auto
Применяется К флекс-элементам, в том числе в потоке псевдоэлементов.
Наследуется Нет
Анимируемое Да.
Версия CSS3
DOM синтаксис Object.style.flex = "1";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <title>Заголовок документа</title>
  <head>
    <style> 
      .box {
      width: 350px;
      height: 200px;
      padding-left: 0;
      list-style-type: none;	
      border: 1px dashed black;
      display: -webkit-flex;
      display: flex;
      }
      .box div {
      flex: 1;
      }
      .green {background-color: #8ebf42}
      .blue {background-color: #1c87c9;}
      .gray {background-color: #666}
    </style>
  </head>
  <body>
    <h2>Пример свойства flex</h2>
    <div class="box">
      <div class="green">GREEN</div>
      <div class="blue">BLUE</div>
      <div class="gray">GRAY</div>
    </div>
  </body>
</html>

Пример, где один из элементов имеет другой размер:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      /* Safari 6.1+ */
      .box div:nth-of-type(1) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(2) {-webkit-flex-grow: 4;}
      .box div:nth-of-type(3) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(4) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(5) {-webkit-flex-grow: 1;}
      /* Standard syntax */
      .example div:nth-of-type(1) {flex-grow: 1;}
      .example div:nth-of-type(2) {flex-grow: 4;}
      .example div:nth-of-type(3) {flex-grow: 1;}
      .example div:nth-of-type(4) {flex-grow: 1;}
      .example div:nth-of-type(5) {flex-grow: 1;}
    </style>
  </head>
  <body>
    <h2>Пример flex-grow</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-shrink:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      .box div {
      -webkit-flex-grow: 1; /* Safari 6.1+ */
      -webkit-flex-shrink: 2; /* Safari 6.1+ */
      -webkit-flex-basis: 100px; /* Safari 6.1+ */
      flex-grow: 1;
      flex-shrink: 2;
      flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
      -webkit-flex-shrink: 5; /* Safari 6.1+ */
      flex-shrink: 5;
      }
    </style>
  </head>
  <body>
    <h2>Пример flex-shrink</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-grow Определяет сколько должен увеличиваться элемент относительно других гибких элементов того же контейнера.
flex-shrink Определяет сколько должен уменьшаться элемент относительно других гибких элементов того же контейнера.
flex-basis Указывает ширину элемента при помощи "auto", "inherit" или чисел, после которых следуют "%", "px", "em" и т. д.
auto Эквивалентно 1 1 auto.
initial Эквивалентно 1 0 auto.
none Эквивалентно 0 0 auto.
inherit Значение элемента наследуется от родительского элемента

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

chrome firefox safari opera
29.0+
21-28 -webkit- 		28.0+ 9.0+
6.1-8.0 -webkit- 		12.1+

Практикуйте свои знания

Какие из перечисленных свойств можно использовать с информацией о flex в CSS?
Считаете ли это полезным?