Flexbox колдонуп жаткан элементтердин өлчөмдөрүн…

Flexboxтогу элементтердин өлчөмдөрүн ийкемдүү өзгөртүүгө flex-grow, flex-shrink жана flex-basis касиеттерин колдонсо болот.

flex-grow: Элементтин эркин кеңейүү мүмкүнчүлүгүн аныктайт. Деңгээл default 0 (кеңейбейт). Жогорку мааниси башка элементтерге салыштырмалуу көбүрөөк кеңейүү коэффициентине ээ.
flex-shrink: Элементтин жетиштүү эркин кеңейбеген учурда кысуу мүмкүнчүлүгүн аныктайт. Деңгээл default 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; /* `initial` менен барабар */
}

/* Элемент кеңейбейт, кысылбайт жана негизги өлчөм мазмун менен аныкталган */
.flex-item {
  flex: 0 0 auto; /* `none` менен барабар */
}

/* Элемент кеңейтилет, кысылат жана негизги өлчөм 0 (бирдей кеңдиктүү элементтер түзүү үчүн ыңгайлуу) */
.flex-item {
  flex: 1 1 0; /* `auto` менен барабар */
}

Бул касиеттердин колдонулушу flex-контейнер ичиндеги элементтердин жүрүм-турумун так башкарууга мүмкүндүк берет, экрандын өлчөмү же мазмун өзгөргөндө.

Flexbox колдонуп жаткан элементтердин өлчөмдөрүн кандай ийкемдүү өзгөртүүгө болот?