Justering af flex-blokke langs den tværgående akse i CSS

Lad os nu justere blokkene langs den tværgående akse. Justering langs denne akse styres af egenskaben align-items. Værdien flex-start presser elementerne mod aksens start, og værdien flex-end - mod aksens slutning.

Lad os prøve med eksempler.

Eksempel

Lad os rette hovedaksen fra venstre mod højre. I dette tilfælde vil den tværgående akse være rettet fra top til bund. Lad os justere placeringen af vores blokke både langs hovedaksen og den tværgående akse.

Langs hovedaksen presser vi blokkene mod dens start, det vil sige mod venstre kant. For at gøre dette sættes justify-content til værdien flex-start. Langs den tværgående akse presser vi også blokkene mod dens start, det vil sige mod den øverste kant. For at gøre dette sættes align-items også til værdien flex-start.

Lad os se, hvad vi får:

.parent {
	display: flex;
	flex-direction:  row;        /* hovedakse mod højre, tværgående nedad */
	justify-content: flex-start; /* blokke mod starten af hovedaksen */
	align-items:     flex-start; /* blokke mod starten af den tværgående akse */
}

Resultat af kodeudførelse:

Eksempel

Lad os nu presse blokkene mod slutningen af den tværgående akse, det vil sige mod bunden. For at gøre dette sættes align-items til værdien flex-end:

.parent {
	display: flex;
	flex-direction:  row;        /* hovedakse mod højre, tværgående nedad */
	justify-content: flex-start; /* blokke mod starten af hovedaksen */
	align-items:     flex-end;   /* blokke mod slutningen af den tværgående akse */
}

Resultat af kodeudførelse:

Eksempel

Lad os nu rette hovedaksen fra top til bund. Da hovedaksen er lodret, vil den tværgående akse være rettet fra højre mod venstre. Lad os presse blokkene langs begge akser mod deres start:

.parent {
	display: flex;
	flex-direction:  column;     /* hovedakse nedad, tværgående mod højre */
	justify-content: flex-start; /* blokke mod starten af hovedaksen */
	align-items:     flex-start; /* blokke mod starten af den tværgående akse */
}

Resultat af kodeudførelse:

Eksempel

Og nu langs den tværgående akse presser vi blokkene mod dens slutning:

.parent {
	display: flex;
	flex-direction:  column;     /* hovedakse nedad, tværgående mod højre */
	justify-content: flex-start; /* blokke mod starten af hovedaksen */
	align-items:     flex-end;   /* blokke mod slutningen af den tværgående akse */
}

Resultat af kodeudførelse:

Eksempel

Lad os presse blokkene mod slutningen af begge akser:

.parent {
	display: flex;
	flex-direction:  column;   /* hovedakse nedad, tværgående mod højre */
	justify-content: flex-end; /* blokke mod slutningen af hovedaksen */
	align-items:     flex-end; /* blokke mod slutningen af den tværgående akse */
}

Resultat af kodeudførelse:

Eksempel

Lad os ændre retningen på hovedaksen - ret den fra bund til top. Den tværgående akse vil ikke ændre sin retning, fordi hovedaksen stadig er lodret.

Lad os presse blokkene mod starten af begge akser:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* hovedakse opad, tværgående mod højre */
	justify-content: flex-start;     /* blokke mod starten af hovedaksen */
	align-items:     flex-start;     /* blokke mod starten af den tværgående akse */
}

Resultat af kodeudførelse:

Praktiske opgaver

Gentag siden efter følgende eksempel: