Zarovnanie flex boxov pozdĺž priečnej osi v CSS

Poďme teraz zarovnávať bloky aj pozdĺž priečnej osi. Zarovnanie pozdĺž tejto osi sa nastavuje pomocou vlastnosti align-items. Hodnota flex-start priraďuje prvky na začiatok osi a hodnota flex-end - na koniec.

Vyskúšajme to na príkladoch.

Príklad

Nasmermujme hlavnú os zľava doprava. V tomto prípade bude priečna os smerovať zhora nadol. Poďme upraviť umiestnenie našich blokov pozdĺž hlavnej osi aj priečnej osi.

Pozdĺž hlavnej osi priraďme bloky na jej začiatok, teda na ľavý okraj. Na to justify-content nastavíme na hodnotu flex-start. Pozdĺž priečnej osi tiež priraďme bloky na jej začiatok, teda na horný okraj. Na to align-items tiež nastavíme na hodnotu flex-start.

Pozrime sa, čo nám vychádza:

.parent {
	display: flex;
	flex-direction:  row;        /* hlavná os doprava, priečna nadol */
	justify-content: flex-start; /* bloky na začiatok hlavnej osi */
	align-items:     flex-start; /* bloky na začiatok priečnej osi */
}

Výsledok vykonania kódu:

Príklad

Poďme teraz priradiť bloky na koniec priečnej osi, teda na dno. Na to align-items nastavíme na hodnotu flex-end:

.parent {
	display: flex;
	flex-direction:  row;        /* hlavná os doprava, priečna nadol */
	justify-content: flex-start; /* bloky na začiatok hlavnej osi */
	align-items:     flex-end;   /* bloky na koniec priečnej osi */
}

Výsledok vykonania kódu:

Príklad

Nasmermujme teraz hlavnú os zhora nadol. Keďže hlavná os je vertikálna, priečna bude smerovať sprava doľava. Poďme priradiť bloky pozdĺž oboch osí na ich začiatok:

.parent {
	display: flex;
	flex-direction:  column;     /* hlavná os nadol, priečna doprava */
	justify-content: flex-start; /* bloky na začiatok hlavnej osi */
	align-items:     flex-start; /* bloky na začiatok priečnej osi */
}

Výsledok vykonania kódu:

Príklad

A teraz pozdĺž priečnej osi priraďme bloky na jej koniec:

.parent {
	display: flex;
	flex-direction:  column;     /* hlavná os nadol, priečna doprava */
	justify-content: flex-start; /* bloky na začiatok hlavnej osi */
	align-items:     flex-end;   /* bloky na koniec priečnej osi */
}

Výsledok vykonania kódu:

Príklad

Priraďme bloky na koniec oboch osí:

.parent {
	display: flex;
	flex-direction:  column;   /* hlavná os nadol, priečna doprava */
	justify-content: flex-end; /* bloky na koniec hlavnej osi */
	align-items:     flex-end; /* bloky na koniec priečnej osi */
}

Výsledok vykonania kódu:

Príklad

Poďme zmeniť smer hlavnej osi - nasmerujme ju zdola nahor. Pritom priečna os nezmení svoj smer, pretože hlavná os je stále vertikálna.

Priraďme bloky na začiatok oboch osí:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* hlavná os nahor, priečna doprava */
	justify-content: flex-start;     /* bloky na začiatok hlavnej osi */
	align-items:     flex-start;     /* bloky na začiatok priečnej osi */
}

Výsledok vykonania kódu:

Praktické úlohy

Zopakujte stránku podľa daného vzoru: