Merge pull request #717 from Czechitas-podklady-WEB/716-flexbox-přidá…

…ní-obrázků-a-drobné-úpravy

Flexbox: přidání obrázků a drobné úpravy

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,30 +14,28 @@ 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
 
 ### `display: flex`
 
 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}

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,26 +30,20 @@ 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.
 **U flex-shrink je defaultní hodnota 1**, prvek se defaultně smršťuje, aby se vešel do flex-containeru.
 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`.
 Protože můžeme střídat, která osa je hlavní (zda horizontální nebo vertikální) je tu možnost nastavovat místo toho `flex-basis`.
 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.