Flexbox: Jednotlivé zarovnání pomocí Align-Items a Align-Self

V této příručce se naučíš, jak využít vlastnosti align-items a align-self ve stylu CSS k řízení zarovnání jednotlivých prvků v Flex-Containeru. Zatímco align-items stanovuje zarovnání všech přímých potomků kontejneru, align-self umožňuje provádět individuální nastavení pro každý potomek zvlášť. Postupně ti tyto koncepty vysvětlíme, takže na konci budeš přesně vědět, jak tyto vlastnosti efektivně využít.

Nejdůležitější poznatky

• align-items definuje zarovnání všech potomků Flex-Containeru.
• align-self umožňuje individuální zarovnání jednotlivých prvků Flex-uvnitř kontejneru.
• Stretch je výchozí hodnota pro align-items a zajišťuje, že potomci vyplní dostupný prostor.

Krok za krokem příručka

Nejdříve se podíváme na základní konfiguraci Flex-Containeru a na to, jak můžeme ovlivnit zarovnání potomků prostřednictvím align-items.

Zde definuješ kontejner s display: flex;. V tomto kontejneru můžeš poté stanovit zarovnání pomocí align-items, například na stretch, což znamená, že potomci budou zataženi do celé výšky nebo šířky kontejneru.

Můžeš použít různé hodnoty pro align-items, včetně flex-start, center a flex-end. Když nyní nastavíš align-items na stretch, uvidíš, že všechny dětské prvky vyplní celý prostor kontejneru. Abychom to demonstrovali, odebereme pevnou šířku z dětských prvků, takže zabírají celý prostor.

Nyní předpokládejme, že nastavíš align-items na center. Náhle zjistíme, že prvky nezaujímají celý prostor, ale zachovávají pouze minimální šířku, která je potřebná. Toto ti ukazuje, jak důležitá je správná hodnota pro align-items pro dosažení požadovaného rozvržení.

Pokud zase přidáš pevnou šířku, například 200px, uvidíš, že prvky jsou širší a rozvržení zůstává stabilní. Můžeš také použít width: 100%, abys dosáhl podobného efektu.

Nyní dospějeme ke jádru naší příručky: práci s align-self. Tato CSS-vlastnost ti umožňuje nastavit individuální zarovnání každého prvku potomka, nezávisle na nastavení nadřazeného kontejneru. Proto nastavíme align-items na center a poté přidáme konkrétní nastavení pro align-self.

Pro navigační prvek chceš, aby byl úplně vlevo. Nastav align-self: flex-start pro navigaci a ulož své změny. Měl bys pozorovat, jak se navigační prvek posune úplně vlevo.

Pro hlavní prvek (main) nastavíme align-self: center. Měl by zůstat uprostřed a tím se od ostatních prvků vytvoří odstup.

Nyní zarovnáme patu (footer) pomocí align-self: flex-end dolů. Tak všechny nastavení vytvoří diagonální linii z levého horního rohu doprava dolů ve vašem rozvržení.

Pokud nyní pro hlavní prvek nastavíš align-self na stretch, znamená to, že zabereme celý prostor v osě x, čímž se ostatní prvky zkolabují ve výšce.

Stejně tak můžeš změnit směr tím, že nastavíš pro svůj kontejner flex-direction: row. Zde zůstávají postupy pro zarovnání jednotlivých prvků stejné, pouze se změní osa. Začínáme nahoře s flex-start a necháváme prvky zarovnat podle principu stretch.

Důležitým bodem je, že align-self můžeš použít tak často, jak je třeba, abys každému prvku nastavil individuální zarovnání, čímž získáš úplnou kontrolu nad rozvržením kontejneru a jeho potomků.

Pokud cíleně použiješ vlastnosti Flexboxu, můžeš vytvořit vizuálně atraktivní rozvržení, které je optimalizováno i pro různé velikosti obrazovek.

Shrnutí

V této příručce jsme podrobně zpracovali vlastnosti Flexboxu align-items a align-self. Naučil jsi se, jak nastavit zarovnání prvků v Flex-Containeru, ať už globálně přes kontejner nebo individuálně pro každý jednotlivý prvek.