FlexBox 1 od úplného základu - rodičia, "parents"

FlexBox nie je vlastnosť pre jeden prvok. FlexBox zapíname na rodiča, a ten potom začne riadiť svoje deti.

Čiže rodič povie: „odteraz vás budem ukladať vedľa seba alebo pod seba“ a deti sa podľa toho správajú. To je celý základ. 

Načo je FlexBox dobrý

FlexBox sa hodí hlavne vtedy, keď chceme:

  • ukladať prvky vedľa seba
  • zarovnať ich na stred
  • urobiť medzi nimi medzery
  • rozhodnúť, či budú v jednom riadku alebo sa zalomia
  • meniť ich poradie alebo veľkosť

Typické použitie:

  • menu
  • tlačidlá vedľa seba
  • karta s obrázkom a textom
  • boxy v riadku
  • jednoduché riadkové rozloženie

Na celé veľké mriežky stránok je často lepší Grid, ale na veľa bežných vecí je FlexBox veľmi pohodlný.

FlexBox riadi len priame deti rodiča. To znamená, že ak je vo vnútri ďalší vnorený prvok, ten sa sám od seba ešte nestane flex prvkom. Ak chceme riadiť aj jeho deti, musíme dať display: flex; aj jemu. 

Rodič cez FlexBox nerozhoduje len o tom, či budú prvky vedľa seba alebo pod sebou, ale aj o tom, ako sa rozložia v priestore, či budú na strede, na krajoch a aké medzery budú medzi nimi.

Úplný základ

Najprv jednoduchá 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;
}

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

Takto zatiaľ FlexBox ešte vôbec nepoužívame. Výsledok bude taký, že boxy budú pod sebou.

Prečo? Lebo <div> je štandardne blokový prvok a Blokový prvok si chce zabrať celý riadok. Takže prvý box zaberie riadok, druhý ide pod neho, tretí pod druhý.

Prvý krok: zapnúť FlexBox

Teraz pridáme na rodiča toto:  display: flex;

.ukazka {
border: 1px solid #a50000;
display: flex;
}

 

flex box zapnutie

Tým hovoríme: „Tvoje deti sa už nemajú skladať normálne pod seba. Odteraz ich ukladaj ako flex prvky.“

A predvolený smer FlexBoxu je: flex-direction: row;  To znamená: deti pôjdu vedľa seba zľava doprava, takže budú v jednom riadku.

Dve dôležité veci: rodič a deti

Pri FlexBoxe je dobré si to stále hovoriť takto:

1. Flex container

To je rodič, na ktorom je: display: flex;

U nás je to: .ukazka

2. Flex items

To sú priame deti toho rodiča.

U nás sú to:

<div class="box">Prvý</div>
<div class="box">Druhý</div>
<div class="box">Tretí</div>

Osi vo FlexBoxe

Toto je najdôležitejšia časť celej témy.

Vo FlexBoxe sú dve osi:

1. hlavná os – main axis - 'justify-content""'

To je smer, ktorým prvky idú

2. vedľajšia os – cross axis - 'align-items=""'

To je smer kolmo na hlavnú os

Keď je flex-direction: row

.ukazka {
display: flex;
flex-direction: row;
}

tak:

  • hlavná os ide vodorovne "justify-content"
  • vedľajšia os ide zvisle "align-items"

Čiže:

  • vľavo ↔ vpravo = hlavná os
  • hore ↕ dole = vedľajšia os

Keď je flex-direction: column

.ukazka {
display: flex;
flex-direction: column;
}

tak sa to otočí:

  • hlavná os ide zvisle "justify-content"
  • vedľajšia os ide vodorovne "align-items"

Čiže:

  • hore ↕ dole = hlavná os
  • vľavo ↔ vpravo = vedľajšia os

Dôležité je, že justify-content  a  align-items neznamenajú napevno „vodorovne“ a „zvislo“.
Závisí to od toho, aký smer má nastavený  flex-direction

flex-direction

Toto je vlastnosť, ktorou hovoríme, akým smerom sa majú deti ukladať.

Základný zápis

flex-direction: row;

Možnosti sú:

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

1. row

.ukazka {
display: flex;
flex-direction: row;
}

Prvky idú vedľa seba: prvý, druhý, tretí

2. row-reverse

.ukazka {
display: flex;
flex-direction: row-reverse;
}

Prvky pôjdu stále v riadku, ale opačne.

Čiže vizuálne: tretí, druhý, prvý

3. column

.ukazka {
display: flex;
flex-direction: column;
}

Prvky pôjdu pod seba.

4. column-reverse

.ukazka {
display: flex;
flex-direction: column-reverse;
}

Prvky budú pod sebou, ale v opačnom poradí.

Ukážka ďalších nastavení

Medzera medzi prvkami

Veľmi často chceme, aby boxy neboli nalepené na sebe. Najjednoduchšie je použiť:  gap: 1rem;

Kedysi sa toto často riešilo cez margin na deťoch, ale dnes je pri FlexBoxe oveľa pohodlnejšie použiť práve gap, lebo hovoríme rovno rodičovi:

„Sprav medzi deťmi medzery.“ To je čistejšie.

 

Upravené CSS

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

Zarovnanie na hlavnej osi: justify-content

Toto je jedna z najdôležitejších vlastností FlexBoxu.

Používa sa na rozloženie prvkov po hlavnej osi.

Čiže keď máme:  flex-direction: row;  tak justify-content rieši rozloženie zľava doprava.

Základ

justify-content: flex-start;

To je vlastne predvolený stav. Prvky začínajú od začiatku.

Možnosti

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

1. flex-start

Prvky budú pri začiatku.

.ukazka {
display: flex;
justify-content: flex-start;
}

2. center

Prvky budú na strede.

.ukazka {
display: flex;
justify-content: center;
}

3. flex-end

Prvky budú na konci.

.ukazka {
display: flex;
justify-content: flex-end;
}

4. space-between

Prvý prvok bude nalepený na začiatku, posledný na konci, medzi nimi sa rozdelí voľné miesto.

.ukazka {
display: flex;
justify-content: space-between;
}

Toto sa často používa napríklad pri menu alebo v hlavičke:

  • logo vľavo
  • niečo vpravo

flexbox space-between

5. space-around

Každý prvok dostane priestor okolo seba.
Ale kraje nebudú rovnaké ako vnútorné medzery.

6. space-evenly

Voľné miesto sa rozdelí rovnomernejšie.
Často pôsobí najpríjemnejšie na pohľad.

Zarovnanie na vedľajšej osi: align-items

Toto rieši zarovnanie po vedľajšej osi.

Keď máme:  flex-direction: row; , tak vedľajšia os ide hore-dole.

Čiže align-items rieši:

  • hore
  • stred
  • dole

Možnosti

align-items: stretch;
align-items: flex-start;
align-items: center;
align-items: flex-end;

1. stretch

Predvolená hodnota.
Prvky sa môžu natiahnuť podľa výšky rodiča.

2. flex-start

Prvky budú hore.

align-items: flex-start;

3. center

Prvky budú zvislo na strede.

align-items: center;

4. flex-end

Prvky budú dole.

align-items: flex-end;

Ukážka stredu

Toto je veľmi častý príklad. Chceme obsah presne vycentrovať.

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

<div class="ukazka">
<div class="box">Som na strede</div>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.ukazka {
border: 1px solid #a50000;
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
margin: 2rem;
}

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

 

Čo sa tu deje

  • justify-content: center; dá box na stred po hlavnej osi
  • align-items: center; dá box na stred po vedľajšej osi

Keďže máme predvolené row, tak:

  • vodorovne na stred
  • zvisle na stred

FlexBox a výška rodiča

Ak chceš niečo zarovnať na stred aj zvislo, rodič musí mať nejakú výšku. Lebo keby ju nemal, tak vlastne nie je v čom centrovať.

Preto tam býva napríklad:

min-height: 300px; alebo height: 100vh;

Ale pri 100vh treba vedieť, čo robíš, hlavne keď máš na stránke nad tým ešte ďalší obsah.

 

flex-wrap

Normálne sa FlexBox snaží natlačiť prvky do jedného riadku. To znamená, že predvolene má: 

flex-wrap: nowrap;
 

Čiže nezalamuje.

Ak chceme, aby pri nedostatku miesta prvky prešli na ďalší riadok, dáme:

 
flex-wrap: wrap;
 

Ukážka

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

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

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

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

 

Čo sa stane

Kým je miesto, boxy idú vedľa seba.
Keď miesto dôjde, ďalšie boxy sa presunú pod ne.

Čo najčastejšie nastavujeme na rodičovi

  • display: flex; – zapne FlexBox
  • flex-direction – určí smer
  • justify-content – rozloženie po hlavnej osi
  • align-items – zarovnanie po vedľajšej osi
  • gap – medzery medzi deťmi
  • flex-wrap – či sa deti môžu zalomiť