FlexBox 1 od úplného základu

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ý.

Ú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

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.