Zarovnanie flex elementov po hlavnej osi v CSS

Vlastnosť justify-content umožňuje zarovnávať elementy po hlavnej osi. Predtým ste už prešli hodnoty center, space-between, space-around, space-evenly. Poďme si teraz preštudovať niekoľko ďalších hodnôt.

Hodnota flex-start tlačí elementy na začiatok hlavnej osi, a hodnota flex-end - na koniec. Pozrime sa na príklady.

Príklad

Nasmervujeme hlavnú os zľava doprava, nastavením vlastnosti flex-direction na hodnotu row. Pritlačíme bloky na začiatok osi. Na to justify-content nastavíme na hodnotu flex-start:

.parent {
	display: flex;
	flex-direction: row; /* hlavná os zľava doprava */
	justify-content: flex-start; /* bloky na začiatok hlavnej osi */
}

Výsledok vykonania kódu:

Príklad

Poďme teraz pritlačiť bloky na koniec osi. Na to justify-content nastavíme na hodnotu flex-end:

.parent {
	display: flex;
	flex-direction: row; /* hlavná os zľava doprava */
	justify-content: flex-end; /* bloky na koniec hlavnej osi */
}

Výsledok vykonania kódu:

Príklad

Nasmervujeme teraz hlavnú os sprava doľava, nastavením vlastnosti flex-direction na hodnotu row-reverse. Pritlačíme bloky na začiatok osi, teda na pravý okraj. Na to justify-content nastavíme na hodnotu flex-start:

.parent {
	display: flex;
	flex-direction: row-reverse; /* hlavná os sprava doľava */
	justify-content: flex-start; /* bloky na začiatok hlavnej osi */
}

Výsledok vykonania kódu:

Príklad

A teraz poďme pritlačiť bloky na koniec hlavnej osi, teda na ľavý okraj. Na to justify-content nastavíme na hodnotu flex-end:

.parent {
	display: flex;
	flex-direction: row-reverse; /* hlavná os sprava doľava */
	justify-content: flex-end; /* bloky na koniec hlavnej osi */
}

Výsledok vykonania kódu:

Príklad

V predchádzajúcich príkladoch bola hlavná os nasmerovaná horizontálne. Poďme teraz otočiť ju a nasmerovať vertikálne.

Poďme nasmerovať hlavnú os nadol, nastavením vlastnosti flex-direction na hodnotu column.

Pritlačíme bloky na začiatok hlavnej osi, teda na horný okraj. Na to justify-content nastavíme na hodnotu flex-start:

.parent {
	display: flex;
	flex-direction: column; /* hlavná os zhora nadol */
	justify-content: flex-start; /* bloky na začiatok hlavnej osi */
}

Výsledok vykonania kódu:

Príklad

Poďme teraz pritlačiť bloky na koniec hlavnej osi, teda na dolný okraj. Na to justify-content nastavíme na hodnotu flex-end:

.parent {
	display: flex;
	flex-direction: column; /* hlavná os zhora nadol */
	justify-content: flex-end; /* bloky na koniec hlavnej osi */
}

Výsledok vykonania kódu:

Príklad

Otočíme hlavnú os, nasmerujeme ju zdola hore. Na to vlastnosti flex-direction nastavíme hodnotu column-reverse. V tomto prípade bloky zmenia svoje poradie - na začiatku osi bude stáť posledný v HTML kóde blok.

Poďme pritlačiť bloky na začiatok hlavnej osi, teda na dolný okraj. Na to justify-content nastavíme na hodnotu flex-start:

.parent {
	display: flex;
	flex-direction: column-reverse; /* hlavná os zdola hore */
	justify-content: flex-start; /* bloky na začiatok hlavnej osi */
}

Výsledok vykonania kódu:

Príklad

Poďme pritlačiť bloky na koniec hlavnej osi, teda na horný okraj. Na to justify-content nastavíme na hodnotu flex-end:

.parent {
	display: flex;
	flex-direction: column-reverse; /* hlavná os zdola hore */
	justify-content: flex-end; /* bloky na koniec hlavnej osi */
}

Výsledok vykonania kódu:

Praktické úlohy

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