FlexBox 2 - potomkovia, "children"

Keď už máme pochopeného rodiča, prichádza druhá polovica FlexBoxu: deti.

FlexBox na deťoch: čo vieme nastaviť priamo na boxoch

Pri rodičovi riešime hlavne to, ako sa majú deti rozložiť. Pri deťoch riešime hlavne to, ako sa má správať každé z nich zvlášť.

Inak povedané: rodič povie: „budete vedľa seba, budete na strede, budete mať medzi sebou medzery“ a jednotlivé deti ešte môžu povedať: „ja chcem byť širšie“, „ja sa nechcem zmenšiť“, „ja chcem ísť nižšie“, alebo „ja chcem byť vizuálne prvý“.

Ktoré vlastnosti sa dávajú na deti

Keď má rodič nastavené display: flex;, jeho priame deti sa stanú flex items. A práve na ne môžeme dávať tieto vlastnosti:

  • flex-grow – či môže prvok rásť
  • flex-shrink – či sa môže zmenšovať
  • flex-basis – aká má byť jeho základná veľkosť
  • flex – skrátený zápis pre grow, shrink a basis
  • align-self – iné zarovnanie jedného konkrétneho dieťaťa
  • order – zmena poradia

Základná ukážka

HTML
<body>
    <h1>blog</h1>

    <div class="ukazka">
        <div class="box">Prvý</div>
        <div class="box">Druhý</div>
        <div class="box">Tretí</div>
    </div>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  display: flex;
  gap: 1rem;
  margin: 2rem;
  padding: 1rem;
}

.box {
  border: 1px solid #222;
  padding: 1rem;
}

 

flexbox-children default

V tejto chvíli sú všetky tri boxy flex deti. A teraz sa môžeme pozrieť, čo s nimi vieme robiť.

1. flex-grow

Táto vlastnosť hovorí: ak zostane voľné miesto, môže si z neho tento prvok niečo zobrať?

Predvolená hodnota je:

flex-grow: 0;

To znamená: prvok štandardne nerastie. Je len taký veľký, ako potrebuje.

Ukážka bez rastu

.ukazka {
  display: flex;
  gap: 1rem;
}

.box {
  border: 1px solid #222;
  padding: 1rem;
}

Takto budú boxy len také široké, ako potrebuje ich obsah. Ako na predchádzajúcom obrázku.

Ukážka s rastom

.ukazka {
  display: flex;
  gap: 1rem;
}

.box {
  flex-grow: 1;
  border: 1px solid #222;
  padding: 1rem;
}

 

flexbox grow-1

Teraz každý box môže rásť. A keďže všetky majú hodnotu 1, rozdelia si voľné miesto rovnomerne.

Ako tomu rozumieť jednoducho

Predstav si, že rodič má vo vnútri ešte prázdne miesto. Keď všetky deti dostanú flex-grow: 1;, je to, ako keby každé povedalo: „daj mi jeden rovnaký diel z voľného priestoru“.

Keď jedno dieťa dostane viac, napríklad:

.a {
  flex-grow: 1;
}

.b {
  flex-grow: 2;
}

.c {
  flex-grow: 1;
}

tak prostredný box dostane väčší podiel voľného miesta.

Praktická ukážka

HTML
<body>
    <h1>blog</h1>

    <div class="ukazka">
        <div class="box a">1</div>
        <div class="box b">2</div>
        <div class="box c">3</div>
    </div>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  display: flex;
  gap: 1rem;
  margin: 2rem;
  padding: 1rem;
}

.box {
  border: 1px solid #222;
  padding: 1rem;
}

.a {
  flex-grow: 1;
}

.b {
  flex-grow: 2;
}

.c {
  flex-grow: 1;
}

 

flexbox-grow 1-2-1

Výsledok bude taký, že druhý box bude širší.

2. flex-shrink

Táto vlastnosť hovorí: keď je miesta málo, môže sa prvok zmenšiť?

Predvolená hodnota je:

flex-shrink: 1;

To znamená: áno, môže sa stlačiť, ak treba.

Prečo to vôbec existuje

Keď sa do rodiča všetko nezmestí, FlexBox sa snaží prvky natlačiť dovnútra. A práve flex-shrink rozhoduje, či sa môžu zúžiť.

Príklad

.box {
  width: 300px;
  flex-shrink: 1;
}

Keď nebude miesto, box sa môže zmenšiť.

Ale keď dáš:

.box {
  width: 300px;
  flex-shrink: 0;
}

tak box hovorí: „nezmenšuj ma“.

A potom sa môže stať, že:

  • obsah začne pretekať
  • objaví sa horizontálny posuvník
  • layout sa rozbije

 

flexbox-shrink 0

Box 1 má width: 300px; flex-shrink: 0; = drží si veľkosť a pri zmenšení vytláča ostatné prvky. 

Jednoduché zapamätanie

  • flex-shrink: 1; – smiem sa stlačiť
  • flex-shrink: 0; – nestláčaj ma

Toto sa hodí napríklad pri logu, ikone, obrázku alebo tlačidle, ktoré nechceš deformovať.

3. flex-basis

Toto je základná veľkosť prvku ešte predtým, než sa začne riešiť rast alebo zmenšovanie.

Napríklad:

flex-basis: 200px;

To znamená: „začni približne od 200 pixelov“.

Keď máme flex-direction: row;, môžeš si to predstaviť hlavne ako základnú šírku. Keď máme flex-direction: column;, je to základná veľkosť v zvislom smere.

Ukážka

.box {
  flex-basis: 200px;
}

Každý box začne približne od 200 pixelov.

Rozdiel medzi width a flex-basis

Na začiatok si to môžeš zapamätať takto:

  • width je bežná šírka prvku
  • flex-basis je základná veľkosť pre FlexBox logiku

Pri flex prvkoch často dáva väčší zmysel rozmýšľať cez flex-basis.

4. flex

Toto je skrátený zápis. A je veľmi bežný.

Najčastejšie sa stretneš s týmto:

flex: 1;

Na začiatok si to môžeš vysvetliť jednoducho takto: prvok môže rásť a podelí sa o voľné miesto s ostatnými.

Praktická ukážka

HTML
<body>
    <h1>blog</h1>

    <div class="ukazka">
        <div class="box">Karta 1</div>
        <div class="box">Karta 2</div>
        <div class="box">Karta 3</div>
    </div>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  display: flex;
  gap: 1rem;
  margin: 2rem;
  padding: 1rem;
}

.box {
  flex: 1;
  border: 1px solid #222;
  padding: 1rem;
}

 

flexbox flex-1

Všetky tri boxy si rozdelia priestor rovnomerne.

Plný zápis

Skratka flex v sebe spája tieto tri veci:

  • flex-grow
  • flex-shrink
  • flex-basis

Napríklad:

flex: 1 1 200px;

To znamená:

  • môže rásť
  • môže sa zmenšovať
  • začína od 200px

Do bežnej praxe sa často používa práve kratší zápis, ale je dobré vedieť, čo sa za ním skrýva.

5. align-self

Rodič môže mať napríklad nastavené:

.ukazka {
  display: flex;
  align-items: center;
}

To znamená, že všetky deti budú zarovnané rovnako.

Ale jedno konkrétne dieťa môže povedať: „ja sa chcem zaradiť inak“.

Na to slúži:

align-self: flex-start;

alebo napríklad:

align-self: flex-end;

Jednoducho povedané

Rodič povie: „všetci budete na strede“.

Jedno dieťa povie: „ja nie, ja chcem byť nižšie“.

Ukážka

HTML
<body>
    <h1>blog</h1>

    <div class="ukazka">
        <div class="box">1</div>
        <div class="box special">2</div>
        <div class="box">3</div>
    </div>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  display: flex;
  align-items: center;
  min-height: 200px;
  gap: 1rem;
  margin: 2rem;
  padding: 1rem;
}

.box {
  border: 1px solid #222;
  padding: 1rem;
}

.special {
  align-self: flex-end;
}

 

flexbox align-self

Druhý box sa zarovná inak ako ostatné.

6. order

Normálne ide poradie podľa HTML.

Keď je v kóde:

  • prvý
  • druhý
  • tretí

tak takto sa aj zobrazia.

Ale cez order môžeme povedať, že sa majú vizuálne zobraziť inak.

Príklad

.box:nth-child(1) {
  order: 3;
}

.box:nth-child(2) {
  order: 1;
}

.box:nth-child(3) {
  order: 2;
}

(.box:nth-child(1) = prvý box, .box:nth-child(2) = druhý box atď...)

flexbox order

Vizuálne sa poradie zmení.

Dôležitá poznámka

order mení len vizuálne poradie. V HTML zostáva pôvodné poradie rovnaké.

Preto túto vlastnosť netreba používať bez rozmyslu, hlavne pri navigácii, formulároch alebo dôležitom obsahu.

Najpraktickejšie veci na deťoch

V bežnej praxi sa veľmi často používa toto:

  • flex: 1;
  • flex-shrink: 0; pri prvkoch, ktoré nechceme stláčať
  • align-self keď sa má jedno dieťa správať inak

Menej často na začiatku človek ručne rieši každú jednu vec zvlášť, ale je dobré rozumieť tomu, čo sa za tým skrýva.

Krátke zhrnutie

Pri rodičovi sme riešili hlavne:

  • smer
  • zarovnanie
  • medzery
  • zalamovanie

Pri deťoch riešime hlavne:

  • či môžu rásť
  • či sa môžu zmenšovať
  • akú majú mať základnú veľkosť
  • či sa jedno z nich má správať inak

A práve tu sa FlexBox stáva naozaj užitočný, lebo už nevieme len ukladať prvky vedľa seba, ale vieme rozhodovať aj o tom, ako sa má každý box správať vo vnútri spoločného priestoru.