Justering av flexboxar längs tväraxeln i CSS

Låt oss nu justera blocken längs tväraxeln. Justering längs denna axel anges med egenskapen align-items. Värdet flex-start pressar elementen till början av axeln, och värdet flex-end - till slutet.

Låt oss prova med exempel.

Exempel

Låt oss rikta huvudaxeln från vänster till höger. I detta fall kommer tväraxeln att riktas från toppen och nedåt. Låt oss justera placeringen av våra block både längs huvudaxeln och tväraxeln.

Längs huvudaxeln pressar vi blocken till dess början, dvs till vänsterkanten. För detta sätter vi justify-content till värdet flex-start. Längs tväraxeln pressar vi också blocken till dess början, dvs till överkanten. För detta sätter vi align-items också till värdet flex-start.

Låt oss se vad vi får:

.parent {
	display: flex;
	flex-direction:  row;        /* huvudaxel åt höger, tväraxel nedåt */
	justify-content: flex-start; /* block till början av huvudaxeln */
	align-items:     flex-start; /* block till början av tväraxeln */
}

Resultat av kodkörning:

Exempel

Låt oss nu pressa blocken till slutet av tväraxeln, dvs till botten. För detta sätter vi align-items till värdet flex-end:

.parent {
	display: flex;
	flex-direction:  row;        /* huvudaxel åt höger, tväraxel nedåt */
	justify-content: flex-start; /* block till början av huvudaxeln */
	align-items:     flex-end;   /* block till slutet av tväraxeln */
}

Resultat av kodkörning:

Exempel

Låt oss nu rikta huvudaxeln från toppen och nedåt. Eftersom huvudaxeln är vertikal kommer tväraxeln att riktas från höger till vänster. Låt oss pressa blocken längs båda axlarna till deras början:

.parent {
	display: flex;
	flex-direction:  column;     /* huvudaxel nedåt, tväraxel åt höger */
	justify-content: flex-start; /* block till början av huvudaxeln */
	align-items:     flex-start; /* block till början av tväraxeln */
}

Resultat av kodkörning:

Exempel

Och nu längs tväraxeln pressar vi blocken till dess slut:

.parent {
	display: flex;
	flex-direction:  column;     /* huvudaxel nedåt, tväraxel åt höger */
	justify-content: flex-start; /* block till början av huvudaxeln */
	align-items:     flex-end;   /* block till slutet av tväraxeln */
}

Resultat av kodkörning:

Exempel

Låt oss pressa blocken till slutet av båda axlarna:

.parent {
	display: flex;
	flex-direction:  column;   /* huvudaxel nedåt, tväraxel åt höger */
	justify-content: flex-end; /* block till slutet av huvudaxeln */
	align-items:     flex-end; /* block till slutet av tväraxeln */
}

Resultat av kodkörning:

Exempel

Låt oss ändra riktningen på huvudaxeln - rikta den från botten till toppen. Samtidigt kommer tväraxeln inte att ändra sin riktning, eftersom huvudaxeln fortfarande är vertikal.

Låt oss pressa blocken till början av båda axlarna:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* huvudaxel uppåt, tväraxel åt höger */
	justify-content: flex-start;     /* block till början av huvudaxeln */
	align-items:     flex-start;     /* block till början av tväraxeln */
}

Resultat av kodkörning:

Praktiska uppgifter

Upprepa sidan enligt detta mönster: