Rozložení a zarovnání

Samotný prvek nav má tři viditelné děti: logo, seznam odkazů a tlačítko Přispět. (Skryté tlačítko Menu se nepočítá: prvek s display: none se vůbec nerozmisťuje.) Postavíme je do řady, logo vlevo a tlačítko vpravo.

Z kurzu CSS víte, že podél hlavní osy rozkládá položky vlastnost justify-content a na příčné ose je umisťuje align-items. I jejich hodnoty mají své třídy: justify-* pro justify-content a items-* pro align-items. Názvy jsou kratší než hodnoty, protože Tailwind vynechává části flex- a space-:

Třída	CSS
`justify-start`	`justify-content: flex-start;`
`justify-center`	`justify-content: center;`
`justify-end`	`justify-content: flex-end;`
`justify-between`	`justify-content: space-between;`
`justify-around`	`justify-content: space-around;`
`justify-evenly`	`justify-content: space-evenly;`
`items-stretch`	`align-items: stretch;`
`items-start`	`align-items: flex-start;`
`items-center`	`align-items: center;`
`items-end`	`align-items: flex-end;`
`items-baseline`	`align-items: baseline;`

Bez těchto tříd se flex kontejner chová jako s justify-start a items-stretch, stejně jako v CSS.

Pokyny

Přidejte prvku nav třídu flex. Logo, odkazy a tlačítko Přispět se postaví vedle sebe. A polstrování tlačítka teď zabírá místo: jako flex položka se tento odkaz chová jako blok.

Přidejte třídu justify-between. Logo zůstane vlevo, tlačítko se přesune k pravému kraji a odkazy budou mezi nimi, se stejnou mezerou z obou stran.

Logo, odkazy i tlačítko jsou roztažené na výšku nejvyššího z nich, tlačítka, a jejich text zůstává nahoře. Proto odkazy sedí o kousek výš než text tlačítka. Přidejte třídu items-center a všechno se svisle vycentruje.

Začněte programovat zdarma

3/11