Flex Grow: Полное руководство по использованию свойства flex-grow в CSS

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

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

Допустим, у нас есть div контейнер, который разделен на две колонки, и мы хотим, чтобы правая колонка занимала всё доступное свободное место. Мы можем задать этому элементу значение flex-grow равным 1, а значение flex-basis равным 0, чтобы разрешить элементу растягиваться.

Пример:

html

  
Lorem ipsum dolor sit amet
  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas

css
.container {
  display: flex;
  width: 100%;
}
.left-column {
  width: 200px;
}
.right-column {
  flex-grow: 1;
  flex-basis: 0;
}

В этом примере, левая колонка занимает 200 пикселей ширины, а правая колонка занимает всё оставшееся свободное пространство.

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

Пример:

html

  
Lorem ipsum dolor sit amet
  
Phasellus eget nunc
  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas

css
.container {
  display: flex;
  width: 100%;
}
.left-column {
  width: 200px;
}
.middle-column {
  flex-basis: 50%;
  flex-grow: 1;
}
.right-column {
  flex-basis: 20%;
  flex-grow: 2;
}

В этом примере, левая колонка занимает 200 пикселей ширины, правая колонка - 20% от всего доступного пространства, а средняя колонка занимает половину от оставшегося пространства. Если на странице была бы нечётная ширина, оставшееся пространство бы разделилось между центром и правой колонкой пропорционально их значениям flex-grow.