Shrnutí

V této lekci jsme se naučili rozkládat prvky pomocí flexboxu a dozvěděli jsme se, že:

• Deklarace display: flex udělá z prvku flex kontejner a z jeho dětí flex položky.
• Flex položky se řadí jedna za druhou podél hlavní osy. Příčná osa je na ni kolmá.
• flex-direction určuje směr hlavní osy: row (řada, výchozí), column (sloupec), row-reverse nebo column-reverse.
• justify-content rozkládá položky podél hlavní osy: flex-start (výchozí chování), center, flex-end, space-between, space-around nebo space-evenly.
• align-items umisťuje položky na příčné ose: stretch (výchozí chování), flex-start, center nebo flex-end.
• Abychom něco vycentrovali v obou směrech, dáme jeho rodiči display: flex, justify-content: center a align-items: center.
• gap nastavuje mezery mezi flex položkami: jen mezi nimi, nikdy ne na krajích.
• Flex položky zůstávají na jednom řádku, a když se nevejdou, zmenšují se. S flex-wrap: wrap se místo toho přesunou na další řádek.
• flex-grow u flex položky určuje, kolik volného místa dostane. flex: 1 položku také roztáhne, ale od počáteční velikosti nula, ne od její šířky.

Flexbox rozkládá položky v jednom směru: v řadě, nebo ve sloupci. V příští lekci, CSS Grid, se naučíte rozložit prvky do řádků a sloupců najednou.