Justering af flex-elementer langs hovedaksen i CSS

Egenskaben justify-content tillader justering af elementer langs hovedaksen. Tidligere har du allerede lært værdierne center, space-between, space-around, space-evenly. Lad os nu studere nogle flere værdier.

Værdien flex-start presser elementerne mod starten af hovedaksen, og værdien flex-end - mod slutningen. Lad os se på eksempler.

Eksempel

Lad os rette hovedaksen fra venstre mod højre ved at give egenskaben flex-direction værdien row. Lad os presse blokkene mod aksens start. For at gøre dette skal justify-content sættes til værdien flex-start:

.parent {
	display: flex;
	flex-direction: row; /* hovedakse fra venstre mod højre */
	justify-content: flex-start; /* blokke mod starten af hovedaksen */
}

Resultatet af kodeudførelsen:

Eksempel

Lad os nu presse blokkene mod aksens slutning. For at gøre dette skal justify-content sættes til værdien flex-end:

.parent {
	display: flex;
	flex-direction: row; /* hovedakse fra venstre mod højre */
	justify-content: flex-end; /* blokke mod slutningen af hovedaksen */
}

Resultatet af kodeudførelsen:

Eksempel

Lad os nu rette hovedaksen fra højre mod venstre, ved at give egenskaben flex-direction værdien row-reverse. Lad os presse blokkene mod starten af aksen, det vil sige mod højre kant. For at gøre dette skal justify-content sættes til værdien flex-start:

.parent {
	display: flex;
	flex-direction: row-reverse; /* hovedakse fra højre mod venstre */
	justify-content: flex-start; /* blokke mod starten af hovedaksen */
}

Resultatet af kodeudførelsen:

Eksempel

Lad os nu presse blokkene mod slutningen af hovedaksen, det vil sige mod venstre kant. For at gøre dette skal justify-content sættes til værdien flex-end:

.parent {
	display: flex;
	flex-direction: row-reverse; /* hovedakse fra højre mod venstre */
	justify-content: flex-end; /* blokke mod slutningen af hovedaksen */
}

Resultatet af kodeudførelsen:

Eksempel

I de foregående eksempler var hovedaksen rettet vandret. Lad os nu vende den og rette den lodret.

Lad os rette hovedaksen nedad, ved at give egenskaben flex-direction værdien column.

Lad os presse blokkene mod starten af hovedaksen, det vil sige mod den øverste kant. For at gøre dette skal justify-content sættes til værdien flex-start:

.parent {
	display: flex;
	flex-direction: column; /* hovedakse fra top til bund */
	justify-content: flex-start; /* blokke mod starten af hovedaksen */
}

Resultatet af kodeudførelsen:

Eksempel

Lad os nu presse blokkene mod slutningen af hovedaksen, det vil sige mod den nederste kant. For at gøre dette skal justify-content sættes til værdien flex-end:

.parent {
	display: flex;
	flex-direction: column; /* hovedakse fra top til bund */
	justify-content: flex-end; /* blokke mod slutningen af hovedaksen */
}

Resultatet af kodeudførelsen:

Eksempel

Lad os vende hovedaksen, så den rettes fra bund mod top. For at gøre dette skal egenskaben flex-direction tildeles værdien column-reverse. I dette tilfælde vil blokkene skifte rækkefølge - i starten af aksen vil den sidste blok i HTML-koden stå.

Lad os presse blokkene mod starten af hovedaksen, det vil sige mod den nederste kant. For at gøre dette skal justify-content sættes til værdien flex-start:

.parent {
	display: flex;
	flex-direction: column-reverse; /* hovedakse fra bund til top */
	justify-content: flex-start; /* blokke mod starten af hovedaksen */
}

Resultatet af kodeudførelsen:

Eksempel

Lad os presse blokkene mod slutningen af hovedaksen, det vil sige mod den øverste kant. For at gøre dette skal justify-content sættes til værdien flex-end:

.parent {
	display: flex;
	flex-direction: column-reverse; /* hovedakse fra bund til top */
	justify-content: flex-end; /* blokke mod slutningen af hovedaksen */
}

Resultatet af kodeudførelsen:

Praktiske opgaver

Gentag siden efter denne model: