Kuidas saab flexboxi kasutavate elementide suurusi…

Flexbox elementide suuruse muutmine on paindlik kasutades flex-grow, flex-shrink ja flex-basis omadusi.

flex-grow: Määrab, kui palju element võib kasvada, kasutades vaba ruumi konteineris. Vaikimisi väärtus on 0 (ei kasva). Kõrgem väärtus tähendab suuremat kasvumäära teiste elementidega võrreldes.
flex-shrink: Määrab, kui palju element võib kokku tõmbuda, kui vaba ruumi on vähe. Vaikimisi väärtus on 1 (tõmbub kokku). Kõrgem väärtus tähendab suuremat kokkutõmbumise määra.
flex-basis: Määrab elemendi algse suuruse enne vaba ruumi jaotamist. Seda saab määrata fikseeritud väärtusena (px, %, rem) või võtmesõnana (auto, content).

Need kolm omadust on sageli kombineeritud lühivormiga flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Kasutusnäited:

/* Element võtab kogu saadaval oleva ruumi */
.flex-item {
  flex-grow: 1;
}

/* Element ei tõmbu kokku, kui ruumi on vähe */
.flex-item {
  flex-shrink: 0;
}

/* Elementil on algsuurus 100px ja see kasvab, kui ruumi on */
.flex-item {
  flex: 1 1 100px;
}

/* Elementi algsuurus määratakse selle sisust ning see võib kokku tõmbuda */
.flex-item {
  flex: 0 1 auto; /* võrdub `initial`-ga */
}

/* Element ei kasva ega tõmbu kokku ning selle algsuurus on sisust sõltuv */
.flex-item {
  flex: 0 0 auto; /* võrdub `none`-ga */
}

/* Element kasvab, tõmbub kokku ning selle algsuurus on 0 (sobib ühtlaste laiustega elementide loomiseks) */
.flex-item {
  flex: 1 1 0; /* võrdub `auto`-ga */
}

Nende omaduste kasutamine võimaldab täpselt juhtida elementide käitumist flex-konteineris, kui ekraani või sisu suurus muutub.

Kuidas saab flexboxi kasutavate elementide suurusi paindlikult muuta?