Flexbox

Teď uspořádáme navigaci. V kurzu CSS jste flexbox zapínali deklarací display: flex u rodiče prvků, které mají stát vedle sebe. V Tailwindu na to slouží třída flex:

.flex {
	display: flex;
}

Prvek se třídou flex se stane flex kontejnerem a jeho děti se stanou flex položkami: seřadí se vedle sebe do řady, zleva doprava.

Mezery mezi položkami nastavují třídy gap-* (vlastnost gap). Používají škálu mezer, kterou znáte z polstrování a okrajů: gap-2 je 0.5rem (8 px), gap-4 je 1rem (16 px), gap-6 je 1.5rem (24 px). gap-x-* nastaví jen mezery mezi sloupci (column-gap) a gap-y-* jen mezery mezi řádky (row-gap).

Proč nedat každému odkazu okraj, třeba mr-4? Museli byste ho napsat ke každému odkazu a mezera by zbyla i za posledním. gap se píše jen jednou, ke kontejneru, a mezery vytvoří jen mezi položkami.

Odkazy navigace jsou v seznamu (ul), každý ve vlastní položce li. Položky seznamu jsou blokové prvky, a tak jsou odkazy pod sebou. (Odrážky odstranil Preflight, základní styly Tailwindu.)