15. flex-grow, flex-shrink, flex-basis детально

CSS Flexbox: flex-grow, flex-shrink, flex-basis – Полное руководство

Иллюстрация к уроку Flexbox – мощный инструмент для создания гибких и адаптивных макетов. Сегодня мы подробно разберем три ключевых свойства flex-элементов: flex-grow, flex-shrink и flex-basis. Понимание этих свойств позволит вам с легкостью управлять размерами элементов внутри flex-контейнера.

Что такое flex-grow, flex-shrink и flex-basis?

Эти три свойства вместе определяют, как flex-элемент будет занимать доступное пространство внутри flex-контейнера.

flex-grow: Определяет, насколько flex-элемент должен увеличиться относительно других flex-элементов в контейнере, если в контейнере есть свободное пространство. Значение – число без единицы измерения.
flex-shrink: Определяет, насколько flex-элемент должен сжаться относительно других flex-элементов в контейнере, если в контейнере недостаточно места. Значение – число без единицы измерения.
flex-basis: Определяет начальный размер flex-элемента до распределения пространства. Может быть задан в любых единицах измерения (px, em, %, и т.д.) или как auto. Если flex-basis установлено в auto, размер элемента определяется его содержимым.

Практические примеры

Давайте рассмотрим несколько примеров, чтобы лучше понять, как эти свойства работают.

Пример 1: Равномерное распределение пространства

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

.container {
  display: flex;
  width: 500px; /* Задаем ширину контейнера */
  border: 1px solid black;
}

.item {
  flex-grow: 1; /* Все элементы занимают равное пространство */
  flex-shrink: 1; /* Все элементы сжимаются одинаково */
  flex-basis: 0; /* Начальный размер 0, пространство распределяется flex-grow */
  padding: 20px;
  text-align: center;
}

.item1 { background-color: lightblue; }
.item2 { background-color: lightgreen; }
.item3 { background-color: lightcoral; }

В этом примере каждый элемент имеет flex-grow: 1, поэтому они равномерно распределяют доступное пространство внутри контейнера. flex-basis: 0 означает, что начальный размер элемента равен 0, и все пространство распределяется на основе flex-grow.

Пример 2: Неравномерное распределение пространства

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

.container {
  display: flex;
  width: 500px;
  border: 1px solid black;
}

.item {
  flex-shrink: 1; /* Все элементы сжимаются одинаково */
  padding: 20px;
  text-align: center;
}

.item1 {
  flex-grow: 2; /* Item 1 занимает в два раза больше места */
  flex-basis: 0;
  background-color: lightblue;
}

.item2 {
  flex-grow: 1; /* Item 2 занимает в один раз больше места */
  flex-basis: 0;
  background-color: lightgreen;
}

.item3 {
  flex-grow: 1; /* Item 3 занимает в один раз больше места */
  flex-basis: 0;
  background-color: lightcoral;
}

Здесь Item 1 имеет flex-grow: 2, а Item 2 и Item 3 имеют flex-grow: 1. Это означает, что Item 1 займет в два раза больше свободного пространства, чем Item 2 и Item 3.

Пример 3: Сжатие элементов

<div class="container">
  <div class="item item1">Очень длинный текст в Item 1</div>
  <div class="item item2">Item 2</div>
</div>

.container {
  display: flex;
  width: 200px;
  border: 1px solid black;
}

.item {
  flex-grow: 1; /* Все элементы занимают равное пространство */
  flex-shrink: 1; /* Все элементы сжимаются одинаково */
  flex-basis: auto; /* Начальный размер определяется контентом */
  padding: 10px;
  text-align: center;
  overflow: hidden; /* Обрезаем текст, если он не помещается */
  white-space: nowrap; /* Запрещаем перенос текста */
}

.item1 { background-color: lightblue; }
.item2 { background-color: lightgreen; }

В этом примере, если содержимое элементов превышает ширину контейнера, элементы будут сжиматься. flex-shrink: 1 позволяет элементам сжиматься, чтобы поместиться в контейнер.

Жизненный пример

Эти свойства широко используются во многих современных фреймворках и библиотеках, таких как Bootstrap и Material UI. Например, в Bootstrap классы, управляющие колонками (col-*), часто используют flex-grow, flex-shrink и flex-basis для создания адаптивных сеток. Многие сайты, разрабатываемые на React, Angular и Vue, используют flexbox для управления компоновкой компонентов. Flexbox позволяет создавать сложные и адаптивные интерфейсы, которые хорошо выглядят на разных устройствах.

Ключевые моменты

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