diff --git a/daweb/html-a-css/flexbox/assets/align-items.png b/daweb/html-a-css/flexbox/assets/align-items.png new file mode 100644 index 00000000..345f1ca3 Binary files /dev/null and b/daweb/html-a-css/flexbox/assets/align-items.png differ diff --git a/daweb/html-a-css/flexbox/assets/flex-direction.png b/daweb/html-a-css/flexbox/assets/flex-direction.png new file mode 100644 index 00000000..d2a56db0 Binary files /dev/null and b/daweb/html-a-css/flexbox/assets/flex-direction.png differ diff --git a/daweb/html-a-css/flexbox/assets/flex-wrap.png b/daweb/html-a-css/flexbox/assets/flex-wrap.png new file mode 100644 index 00000000..6e5d8c7a Binary files /dev/null and b/daweb/html-a-css/flexbox/assets/flex-wrap.png differ diff --git a/daweb/html-a-css/flexbox/assets/justify-content.png b/daweb/html-a-css/flexbox/assets/justify-content.png new file mode 100644 index 00000000..ac4f3b9b Binary files /dev/null and b/daweb/html-a-css/flexbox/assets/justify-content.png differ diff --git a/daweb/html-a-css/flexbox/flex-container.md b/daweb/html-a-css/flexbox/flex-container.md index ed76a701..b73669d5 100644 --- a/daweb/html-a-css/flexbox/flex-container.md +++ b/daweb/html-a-css/flexbox/flex-container.md @@ -1,11 +1,11 @@ Už víme, že se dá udělat rozložení na stránce nastavením css vlastnosti `position` u jednotlivých prvků. S tím jak se v čase kódování webů vyvíjí, tak se rozšiřují a zjednodušují možnosti, jak rozložení webů dělat. Například už není potřeba používat tabulky, nebo floaty. V současné době se pro rozložení prvků na stránce nebo v sekcích používá **flexbox** nebo **grid**. -Flexbox je ideální pro rozložení prvků v sekcích (navbar, galerie fotek etc.), ale dá se s ním i udělat layout celého webu. Pro složitější webový layout se doporučuje použití gridu. Ten na daWeb probírat nebudeme, ale určitě se s ním v budoucnu setkáte a nasdílíme zdroje, abyste se ho mohly v průběhu doučit. +Flexbox je ideální pro rozložení prvků v sekcích (navbar, galerie fotek etc.), ale dá se s ním i udělat layout celého webu. Pro složitější webový layout se doporučuje použití CSS gridu. Ten na daWeb probírat nebudeme, ale určitě se s ním v budoucnu setkáte. Můžete si o něm přečíst třeba v tomto [interaktivním článku](https://www.joshwcomeau.com/css/interactive-guide-to-grid/). ## Flexbox I -Flexbox je nástroj pro tvorbu layoutu (rozložení prvků) pomocí css. +Flexbox je nástroj pro tvorbu layoutu (rozložení prvků) pomocí CSS. Pamatujme si základní pravidla: - Rozlišujeme flex kontejner a flex položky @@ -14,7 +14,7 @@ Pamatujme si základní pravidla: Flexbox se vždy týká obalového elementu – **kontejneru** a jeho potomků – **položek**. V angličtině se jim říká **flex-container** a **flex-items**. Flexbox znamená, že položky v daném kontejneru jsou flexibilní, pružné a tak i vyplňují volný prostor v kontejneru. -Při tvoření layoutu nastavujeme nějaké vlastnosti kontejneru a jiné zase položkám. +Při tvoření layoutu nastavujeme nějaké vlastnosti kontejneru a jiné zase položkám. V první části lekce se podíváme na vlastnosti kontejneru. ## Vlastnosti flex-containeru @@ -22,22 +22,20 @@ Při tvoření layoutu nastavujeme nějaké vlastnosti kontejneru a jiné zase p Pokud máme obsah, který chceme nastylovat jako flexbox, tak vždy musíme zajistit, že je obalený v kontejneru. Kontejneru potom nastavíme vlastnost `display:flex`. -Toto nám zajistí, že se nám děti tohoto kontejneru poskládají vedle sebe (respektive podél jedné osy) a stanou se z nich flex-items. - -::codepen{user=marketaanezka id=bGYvMBY tab=html,result} +Toto nám zajistí, že se nám děti tohoto kontejneru poskládají vedle sebe (respektive podél defaultní hlavní osy) a stanou se z nich flex-items. ### `flex-direction` Flexbox je jednosměrný a směr flexboxu je určený vlastností `flex-direction`. Ve flex-containeru rozlišujeme hlavní a vedlejší osu. Buď je hlavní osa horizontální (řádek) a vedlejší osa vertikální (sloupec), nebo naopak. Která osa je hlavní nám určují hodnoty `row / column / row-reverse/ column-reverse`. Defaultní hodnota vlastnosti flex-direction je `row`. -::codepen{user=marketaanezka id=XWzEqpG tab=html,result} +::fig[flex direction]{src=assets/flex-direction.png} ### `flex-wrap` Pomocí vlastnosti `flex-wrap` určujeme, zda se položky ve flexboxu zalamují, nebo ne. Možné hodnoty jsou `nowrap / wrap / wrap-reverse`. Defaultní hodnota je `nowrap`. -::codepen{user=marketaanezka id=yLPKjMx tab=html,result} +::fig[flex wrap]{src=assets/flex-wrap.png} Dále je na kontejneru možné nastavit, jak se prvky uvnitř něj zarovnají, a to pomocí `justify-content` a `align-items`. @@ -52,7 +50,7 @@ Vlastnost `justify-content` určuje, jak se položky zarovnají **podél hlavní - `space-around` – prvky jsou rozmístěny rovnoměrně na ose, a kolem nich je vždy stejně volného prostoru na každé straně (pro každý prvek zleva i zprava) - `space-evenly` - prvky jsou rozmístěny rovnoměrně na ose a mezi dvěma prvky je vždy stejné místo -::codepen{user=marketaanezka id=GROxdmW tab=html,result} +::fig[justify content]{src=assets/justify-content.png} ### `align-items` @@ -64,10 +62,8 @@ Vlastnost `align-items` určuje zarovnání prvků **podle vedlejší osy**. - `center` - zarovnání do středu osy - `baseline` - zarovnání podle prvního řádku textu -::codepen{user=marketaanezka id=qBVoYVd tab=html,result} +::fig[align items]{src=assets/align-items.png} ### Tvorba layoutu Při tvorbě layoutu pomocí flexboxu se často stává, že musíme flexbox použít víckrát, i zanořený. Proto si pamatujme, že nějaký element může být `flex-item` a zároveň může být `flex-containter` pro další elementy uvnitř. - -::codepen{user=marketaanezka id=mdqGXdJ tab=html,result} diff --git a/daweb/html-a-css/flexbox/flex-items.md b/daweb/html-a-css/flexbox/flex-items.md index 101cc239..4a0c74fb 100644 --- a/daweb/html-a-css/flexbox/flex-items.md +++ b/daweb/html-a-css/flexbox/flex-items.md @@ -1,6 +1,6 @@ ## Flexbox II -Z minulé hodiny si pamatujeme, že flexbox je nástroj, pomocí kterého můžeme upravovat rozložení prvků na stránce. Co už o flexboxu víme: +Z první části lekce je jasné, že flexbox je mocný nástroj, pomocí kterého můžeme upravovat rozložení prvků na stránce. Co už o flexboxu víme: - Nastavením **`display: flex`** vytvoříme flexbox - Flexbox je obalený flex-containerem a uvnitř jsou flex-items @@ -20,8 +20,6 @@ U položek (flex-items) můžeme upravovat pořadí a velikost. Pamatujme, že a Pořadí u flex-items je defaultně **0** a položky jsou poskládány podle toho, jak jsou napsány v HTML. Pokud chceme položku posunout, nastavíme jí vlastnost `order` na číslo větší nebo menší než nula. Hodnota vlastnosti order je pouze číslo, bez jednotky. -::codepen{user=marketaanezka id=xxPWjpx tab=html,result} - Velikost flex-items můžeme nastavovat pomocí vlastností `flex-grow`, `flex-shrink` a `flex-basis`. ### `flex-grow` @@ -32,8 +30,6 @@ Pokud jednomu prvku nastavíme `flex grow: 1` zabere všechno volné místo, pro Pokud jinému prvku nastavíme `flex-grow: 2`, **zabere dvakrát tolik volného místa**, než prvek s hodnotou flex-grow 1. _Není to tak, že prvek s hodnotou flex-grow 2 je dvakrát tak veliký, jako prvek s hodnotou 1._ -::codepen{user=marketaanezka id=XWzEqVL tab=html,result} - ### `flex-shrink` Flex-shrink definuje, zda se bude prvek smršťovat, a o kolik. Jako hodnotu má opět číslo (bez jednotky), nelze nastavit negativní čísla. @@ -41,8 +37,6 @@ Flex-shrink definuje, zda se bude prvek smršťovat, a o kolik. Jako hodnotu má Hodnota `flex-shrink:2` neznamená, že prvek bude dvakrát menší, ale že se bude smršťovat dvakrát "rychleji". Pokud nastavíme hodnotu na `flex-shrink:0`, prvek se nebude smršťovat. -::codepen{user=marketaanezka id=PoOReRJ tab=html,result} - ### `flex-basis` Pokud nastavíme flex-items šířku, tedy `width`, bude se chovat jinak, pokud má flex-container nastaveno `flex-direction:row` nebo `flex-direction:column`. Stejně tak `height`. @@ -50,8 +44,6 @@ Protože můžeme střídat, která osa je hlavní (zda horizontální nebo vert U horizontální hlavní osy (flex-direction:row) znamená `flex-basis:100px`, že **šířka** bude 100px a pokud je hlavní osa vertikální (flex-direction: column), tak to znamená, že **výška** bude 100px. Defaultní nastavení je auto – to znamená tolik, kolik má prvek obsahu. Je možné nastavit specifickou šířku, ale je důležité myslet na `flex-shrink` and `flex-grow`, takže se to dá spíš chápat jako „v ideálním případě“. -::codepen{user=marketaanezka id=XWzEqEL tab=html,result} - ### `flex` Vlastnost `flex` kombinuje vlastnosti `flex-grow`, `flex-shrink` a `flex-basis` ve zkráceném zápisu. Je důležité pořadí hodnot - první je vždy flex-grow, následně flex-shrink a poslední je flex-basis.