Egenskaben align-items

Egenskaben align-items angiver justering af elementer langs den tværgående akse for flex-containere og langs den lodrette akse for grids. Anvendes på forælderelementet.

Syntaks

selektor {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

Værdier

Værdi	Beskrivelse
`flex-start`	Blokkene er presset mod starten af den tværgående (lodrette) akse.
`flex-end`	Blokkene er presset mod slutningen af den tværgående (lodrette) akse.
`center`	Blokkene er centreret langs den tværgående (lodrette) akse.
`baseline`	Elementer justeres efter deres basislinje. Basislinjen er en imaginær linje, der løber langs bundkanten af tegn uden hængende dele, for eksempel som hos bogstaverne `'p'` og `'y'`.
`stretch`	Blokkene er strukket og optager alt tilgængeligt plads langs den tværgående akse, dog tages der stadig hensyn til `min-width` og `max-width`, hvis de er angivet. Hvis der er angivet bredde og højde for elementerne - vil `stretch` blive ignoreret.

Standardværdi: stretch.

Eksempel . Værdien stretch

Lige nu er hovedaksen rettet fra venstre mod højre, og langs den tværgående akse er elementerne strukket over hele højden:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Eksempel . Værdien stretch + elementstørrelser

Lige nu er der angivet bredde og højde for elementerne, derfor vil værdien stretch for egenskaben align-items blive ignoreret:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Eksempel . Værdien flex-start uden elementstørrelser

Lige nu vil elementerne være presset mod toppen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Eksempel . Værdien flex-start + elementstørrelser

Lige nu vil elementerne stadig være presset mod toppen, men de vil have en angivet bredde og højde:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Eksempel . Værdien flex-end + elementstørrelser

Lige nu vil elementerne være presset mod bunden:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Eksempel . Værdien center + elementstørrelser

Lige nu vil elementerne være centreret langs den tværgående akse (i dette tilfælde lodret):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Eksempel . Værdien center, elementer af forskellig størrelse

Lige nu har elementerne forskellig højde (lige nu udvides de af teksten, men man kan også angive height), bredden er den samme for alle, da egenskaben width er angivet:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

Eksempel . Værdien baseline, elementer af forskellig størrelse

Og sådan ser justering efter basislinjen ud:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

Eksempel . Justering efter starten af den lodrette akse i grid

Lad os justere vores elementer inde i cellerne efter starten af den lodrette akse:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Og lad os nu se på vores grid i browserens debugger:

Eksempel . Justering efter midten af den lodrette akse i grid

Og lad os nu justere vores elementer i cellerne efter midten af den lodrette akse:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: center;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Lad os se på visningen af griddet i debuggeren:

Eksempel . Justering efter slutningen af den lodrette akse i grid

Lad os igen ændre justeringen af elementerne, denne gang efter slutningen af den lodrette akse:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	
}

Og lad os nu se hvordan vores grid ser ud via debuggeren:

Se også

egenskaben flex-direction,
som angiver retningen af akserne for flex-containere
egenskaben justify-content,
som angiver justering langs hovedaksen
egenskaben align-items,
som angiver justering langs den tværgående akse
egenskaben flex-wrap,
som angiver multilinearitet for flex-containere
egenskaben flex-flow,
forkortelse for flex-direction og flex-wrap
egenskaben order,
som angiver rækkefølgen af flex-containere
egenskaben align-self,
som angiver justering af en enkelt blok
egenskaben flex-basis,
som angiver størrelsen af en specifik flex-container
egenskaben flex-grow,
som angiver "grådigheden" af flex-containere
egenskaben flex-shrink,
som angiver sammenpresseligheden af flex-containere
egenskaben flex,
forkortelse for flex-grow, flex-shrink og flex-basis