Flex kontejner

V minulé lekci jste viděli, jak prohlížeč skládá prvky v normálním toku: blokové prvky jdou shora dolů jeden pod druhým a řádkové prvky se řadí vedle sebe jako slova ve větě. Na webových stránkách je ale spousta věcí vedle sebe: navigační lišty, řady karet, logo vlevo a odkazy vpravo. Na takové rozložení má CSS přímo stvořený nástroj: flexbox (z anglického flexible box layout, pružné rozložení boxů).

Pro tuto lekci jsme naši stránku o kočce rozšířili: nahoře je navigační lišta s logem a odkazy na jednotlivé sekce, oblast s nadpisem má podnadpis a ze seznamu plemen se staly čtyři karty. Zatím je všechno jen pod sebou. Karty uvidíte, když v náhledu sjedete dolů. V této lekci stránku pomocí flexboxu postupně uspořádáme.

Flexbox zapneme deklarací display: flex u rodiče prvků, které chceme rozložit:

.kontejner {
	display: flex;
}

Prvek s display: flex se stane flex kontejnerem a jeho děti se stanou flex položkami. Položky se seřadí vedle sebe do řady, zleva doprava. Flex položkami se stanou jen děti kontejneru, ne už jejich vlastní děti: obsah uvnitř každé položky se skládá stejně jako předtím.

Flexbox rozmisťuje položky ve dvou směrech, kterým se říká osy. Hlavní osa je směr, ve kterém jsou položky seřazené jedna za druhou. V řadě vede zleva doprava. Příčná osa je na ni kolmá, takže v řadě vede shora dolů. Na obrázku vlevo vidíte řadu. Vpravo je sloupec, který se naučíte vytvořit později v této lekci.

V dalších cvičeních nám osy pomohou říct, kam mají položky jít.