CSS свойство flex-grow

Свойство flex-grow определяет, насколько элемент будет увеличиваться относительно остальных элементов в flex контейнере. Если для всех элементов в контейнере задан коэффициент flex-grow, они делят оставшееся свободное пространство пропорционально своим коэффициентам. Основной размер гибкого элемента — это либо его высота, либо ширина, что зависит от значения flex-direction.

Это свойство входит в число свойств CSS3. Оно используется вместе со свойствами flex-shrink и flex-basis.

INFO

Если гибких элементов нет, свойство flex-grow не окажет никакого эффекта.

Начальное значение	0
Применяется к	Гибкие элементы, включая псевдоэлементы в потоке.
Наследуется	Нет.
Анимация	Да. Элементы можно анимировать.
Версия	CSS3
Синтаксис DOM	object.style.flexGrow = 3;

Синтаксис

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

css

flex-grow: number | initial | inherit;

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

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 2px solid #cccccc;
        display: flex;
      }
      .box div:nth-of-type(1) {
        flex-grow: 1;
      }
      .box div:nth-of-type(2) {
        flex-grow: 2;
      }
      .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 property 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 »

Результат

CSS flex-grow Property

Пример свойства flex-grow с большим коэффициентом роста:

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 2px solid #cccccc;
        display: flex;
      }
      .box div:nth-of-type(1) {
        flex-grow: 1;
      }
      .box div:nth-of-type(2) {
        flex-grow: 6;
      }
      .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 property 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 »

Значения

Значение	Описание	Воспроизвести
число	Определяет, насколько элемент будет увеличиваться относительно остальных гибких элементов того же контейнера. Значение по умолчанию — 0.	Запустить »
initial	Устанавливает свойству значение по умолчанию.	Запустить »
inherit	Наследует это свойство от родительского элемента.

Практика

Какова функция свойства 'flex-grow' в CSS?

'flex-grow' позволяет гибкому элементу увеличиваться при необходимости.'flex-grow' используется для задания направления гибких элементов.'flex-grow' управляет тем, располагаются ли элементы в одну или несколько строк.'flex-grow' определяет, как оставшееся пространство внутри flex-контейнера распределяется между гибкими элементами.'flex-grow' изменяет порядок появления гибких элементов внутри flex-контейнера.

CSS свойство flex-grow ​

Синтаксис ​

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

Результат ​

Пример свойства flex-grow с большим коэффициентом роста: ​

Значения ​