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, размер гибкого элемента будет определяться его содержимым.

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

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

INFO

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

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

Синтаксис

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

css

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

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

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

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

html

<!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>

Try it Yourself »

Результат

Свойство CSS flex

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

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

html

<!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>

Try it Yourself »

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

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

html

<!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>

Try it Yourself »

Значения

Значение	Описание
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 ​

Синтаксис ​

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

Результат ​

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

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

Значения ​

Практика ​

CSS свойство flex

Синтаксис

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

Результат

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

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

Значения

Практика