CSS flexbox: Průvodce všemi vlastnostmi

Vzhůru dolů 13.02.2021 05:41 Flexbox je jeden z nových způsobů, jak v CSS zapisovat layout, ale také zarovnání a distribuci volné plochy. V této aktualizované příručce přibyly texty s příklady pro všechny vlastnosti, které ve flexboxu můžete používat. Související CSS Grid CSS Multicolumn CSS Box Alignment Flex v češtině znamená pružný, přizpůsobivý. Flexboxy jsou tedy pružné elementy layoutu. Jednou z hlavních předností flexboxu je totiž schopnost vyplňovat zbylý prostor. Pokud sháníte příručku k vlastnostem flexboxu, tady je. Všechny vlastnosti Vlastnosti se týkají buď kontejneru, tedy rodičovského prvku nebo položek. Kontejner flexboxu Hodnota vlastnosti display flex nastaví prvku kontext formátování flexboxem, takže jeho přímí potomkové mohou mít specifické vlastnosti. Možná je také „inline“ hodnota: inline-flex. Vlastnost Co dělá a příklad flex-wrap Definuje, zda se položky mohou zalamovat na více řádků nebo ne. Výchozí je nezalamovat. Např. flex-wrap: wrap – položky se mohou vykreslit na další řádek. flex-direction Určí směr toku rozvržení. Výchozí je zleva doprava, do řádku. Např. flex-direction: column – položky se skládají shora dolů, do sloupce. flex-flow Zkratka pro flex-wrap a flex-direction. Např. flex-flow: wrap column – položky se zalomují a skládají shora dolů. Dále lze na kontejner flexboxu aplikovat také vlastnosti : Vlastnost Co dělá a příklad justify-items Zarovnání na řádkové ose . Např. justify-items: center centruje všechny položky. align-items Zarovnání na blokové ose . Např. align-items: end zarovná položky ke spodní hraně kontejneru. place-items Zkratka pro zarovnání položek v obou směrech. Např. place-items: end center zarovná položky ke spodní hraně a vodorovně na střed. K dispozici máme i vlastnosti CSS Box Align, řídící rozdělení volného prostoru, který uvnitř kontejneru zůstává mezi položkami. Vlastnost Co dělá? justify-content Rozdělení prostoru na řádkové ose . Např. justify-content: space-between rozdělí prostor mezi položky. align-content Rozdělení prostoru na blokové ose . Např. align-content: start zajistí zarovnání položek k horní hraně kontejneru. place-content Zkratka pro rozdělení prostoru v obou směrech. Např. place-content: start space-between zajistí zarovnání položek k horní hraně kontejneru a vodorovné dělení prostoru mezi položky. Položky flexboxu Vlastnost Co dělá a příklad flex-grow Jak moc může položka růst. Výchozí je 0. Např. flex-grow: 1 – bere si podíl v hodnotě 1 z volného prostoru. flex-shrink Faktor smršťování položky. Výchozí je 1. Např. flex-shrink: 0 – položka se nesmršťuje. flex-basis Výchozí velikost položky. Výchozí je auto, tzn. podle width nebo height. Např. flex-basis: 0 – nehledí se na rozměr obsahu ani width či height. Také na položky flexboxu můžeme aplikovat vlastnosti : Následujícími vlastnostmi pro konkrétní položku definujeme, jak se bude zarovnávat. Vlastnost Co dělá? justify-self Zarovnání na řádkové ose . Např. justify-self: center vodorovně centruje položku. align-self Zarovnání na blokové ose . Např. align-self: end zarovná položku ke spodní hraně. place-self Zkratka pro zarovnání jednotlivé položky v obou směrech. Např. place-self: end center zarovná položku ke spodní hraně a vodorovně doprostřed. Nyní známe vlastosti a teď pojďme prozkoumat jednoduchý příklad. Základy v jednoduchém příkladu Představme si triviální třísloupcový layout: First is loooooong. Second is looooonger.…… Third is short. HTML je jednoduché. O to přísnější máme požadavky na design. A víte co? Ukážeme si rovnou, jak je splnit pomocí flexboxu. V dalším textu kód z CodePenu ještě poctivě vysvětlíme. Všechny sloupce mají být stejně vysoké Ano, i v případech kdy má ten jeden delší obsah než zbylé dva. To je to nejjednodušší. Stačí z rodiče pomocí vlastnosti display udělat kontejner flexboxu: .container Layout se při nedostatku místa zalomí V případě, že zde nebude dost prostoru pro všechny položky, zalomíme. To definujeme pomocí vlastnosti flex-wrap: .container První dva sloupce jsou pružné, třetí nikoliv Zároveň jsme si vymysleli, že první dva sloupce se budou změnšovat a zvětšovat, přičemž druhý dvakrát více než první. Třetí naopak nikoliv, zůstane vždy na svém. Tady pomůže zkratka vlastností položky flexboxu, flex: .col--1 .col--2 .col--3 Na menších displejích se změní směr Na mobilech zpravila není pro rozvržení prvků vedle sebe prostor. Přidáme proto změnu směru layoutu, což zajistíme vlastností flex-direction: @media } Příklad si utíkejte vyzkoušet naživo na CodePen. cdpn.io/e/jOVVeVL Je to hezké, že? Flexbox je mistr na layouty komponent Je dobré zmínit, že flexbox je určený pro layout komponent uvnitř stránek. Tedy navigací, formulářů, stránkovacích komponent atd. atd. Pro celostránkové layouty se více hodí CSS Grid Layout. Užití flexboxu pro celostránkové layouty je samozřejmě možné. Jen se na velmi pomalých zařízeních nebo internetových připojeních nebude vykreslovat optimálně. Píše o tom třeba Jake Archibald. vrdl.in/zuscj Šup na základní pojmy — flex kontejner a flex položka, hlavní a příčná osa Flexbox tvoří nerozlučná dvojice dvou typů elementů – flex kontejner a flex položka. Flex položkou se stává každý přímý potomek kontejneru. … … Flexbox nadefinujeme snadno jen pomocí flex kontejneru: .flex-container Všechny se tady stávají flex položkami. Kromě flex kontejnerů a položek nás v dalším textu budou zajímat ještě osy. Ukažme si to na zjednodušeném schématu: flex kontejner – rodičovský element flex položka – všichni přímí potomci flex kontejneru hlavní osa – výchozí je horizontální, ale lze změnit příčná osa – vždy příčná k hlavní, takže ve výchozí podobě svislá hlavní rozměr – výchozí je šířka, ale řídí se nastavením hlavní osy příčný rozměr – výchozí je výška Podpora Dostupnost vlastností flexboxu v prohlížečích je velmi dobrá, vždyť s podporou přišel už Internet Explorer 10! Grafy na CanIUse jsou tedy pěkně zelené. caniuse.com/flexbox Konkrétní podporu je ale potřeba rozpadnout podle jednotlivých vlastností, uvedených výše v tabulce. Tam je situace už různorodější. Bojem s více či méně příjemnými chybami je provázena implementace v IE, protože jde o nejstarší dnes sloužící prohlížeče. Detailně se tím zabývá Philip Walton v repozitáři Flexbugs. github.com/philipwalton/flexbugs Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .