Kako fleksibilno menjati veličine elemenata koji koriste flexbox?

Možete fleksibilno menjati veličine elemenata u flexbox-u pomoću svojstava flex-grow, flex-shrink i flex-basis.

• flex-grow: Određuje u kojoj meri element može da se rasteže, popunjavajući slobodni prostor u kontejneru. Podrazumevana vrednost je 0 (ne rasteže se). Viša vrednost označava veći koeficijent rastezanja u odnosu na ostale elemente.
• flex-shrink: Određuje u kojoj meri element može da se smanji u slučaju nedostatka slobodnog prostora. Podrazumevana vrednost je 1 (se smanjuje). Viša vrednost označava veći koeficijent smanjenja.
• flex-basis: Određuje osnovnu veličinu elementa pre raspodele slobodnog prostora. Može biti fiksna vrednost (px, %, rem) ili ključna reč (auto, content).

Ove tri osobine se često kombinuju u skraćenoj osobini flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Primeri upotrebe:

/* Element će zauzeti sav dostupni prostor */
.flex-item {
  flex-grow: 1;
}

/* Element se neće smanjivati u slučaju nedostatka prostora */
.flex-item {
  flex-shrink: 0;
}

/* Element ima osnovnu veličinu od 100px i širi se ako ima mesta */
.flex-item {
  flex: 1 1 100px;
}

/* Element ima osnovnu veličinu određenu sadržajem i može se smanjiti */
.flex-item {
  flex: 0 1 auto; /* Jednako kao `flex: initial;` */
}

/* Element se ne širi, ne smanjuje i ima osnovnu veličinu određenu sadržajem */
.flex-item {
  flex: 0 0 auto; /* Jednako kao `flex: none;` */
}

/* Element se širi, smanjuje i ima osnovnu veličinu 0 (korisno za pravljenje elemenata iste širine) */
.flex-item {
  flex: 1 1 0; /* Jednako kao `flex: auto;` */
}

Korišćenje ovih osobina omogućava precizno upravljanje ponašanjem elemenata unutar flex kontejnera pri promeni veličine ekrana ili sadržaja.