Как можете гъвкаво да променяте размерите на…

Можете гъвкаво да променяте размерите на елементите във flexbox, като използвате свойствата flex-grow, flex-shrink и flex-basis.

flex-grow: Определя до каква степен един елемент може да се разтегне, за да запълни свободното пространство в контейнера. Стойността по подразбиране е 0 (не се разтяга). По-висока стойност означава по-голям коефициент на разтягане спрямо другите елементи.
flex-shrink: Определя до каква степен един елемент може да се свие при липса на свободно пространство. Стойността по подразбиране е 1 (се свива). По-висока стойност означава по-голям коефициент на свиване.
flex-basis: Определя базовия размер на елемента преди разпределението на свободното пространство. Може да бъде зададен като фиксирана стойност (px, %, rem) или ключова дума (auto, content).

Тези три свойства често се комбинират в съкратеното свойство flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Примери за използване:

/* Елементът ще заема цялото налично пространство */
.flex-item {
  flex-grow: 1;
}

/* Елементът няма да се свива при липса на място */
.flex-item {
  flex-shrink: 0;
}

/* Елементът има базов размер 100px и се разтяга, ако има място */
.flex-item {
  flex: 1 1 100px;
}

/* Елементът има базов размер, определен от съдържанието му, и може да се свие */
.flex-item {
  flex: 0 1 auto; /* Еквивалентно на `flex: initial;` */
}

/* Елементът не се разтяга, не се свива и има базов размер, определен от съдържанието му */
.flex-item {
  flex: 0 0 auto; /* Еквивалентно на `flex: none;` */
}

/* Елементът се разтяга, се свива и има базов размер 0 (удобно за създаване на елементи с еднаква ширина) */
.flex-item {
  flex: 1 1 0; /* Еквивалентно на `flex: auto;` */
}

Използването на тези свойства позволява точно управление на поведението на елементите в рамките на flex контейнер при промяна на размера на екрана или съдържанието.

Как можете гъвкаво да променяте размерите на елементите, използващи flexbox?