Eigenschap align-items

De eigenschap align-items bepaalt de uitlijning van elementen langs de dwarsas voor flex containers en langs de verticale as voor grids. Wordt toegepast op het bovenliggende element.

Syntaxis

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

Waarden

Waarde	Beschrijving
`flex-start`	De blokken zijn tegen het begin van de dwarsas (verticale as) aangedrukt.
`flex-end`	De blokken zijn tegen het einde van de dwarsas (verticale as) aangedrukt.
`center`	De blokken staan in het midden van de dwarsas (verticale as).
`baseline`	Elementen worden uitgelijnd volgens hun basislijn. De basislijn is een denkbeeldige lijn die langs de onderkant van de tekens loopt zonder de afhangende delen mee te rekenen, bijvoorbeeld zoals bij de letters `'p'` en `'y'`.
`stretch`	De blokken zijn uitgerekt en nemen alle beschikbare ruimte langs de dwarsas in, waarbij echter nog steeds rekening wordt gehouden met `min-width` en `max-width`, indien ingesteld. Als er een breedte en hoogte voor de elementen zijn ingesteld, wordt `stretch` genegeerd.

Standaardwaarde: stretch.

Voorbeeld . Waarde stretch

Momenteel is de hoofdas van links naar rechts gericht, en langs de dwarsas zijn de elementen uitgerekt over de volledige hoogte:

<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;
}

Voorbeeld . Waarde stretch + elementafmetingen

Momenteel zijn voor de elementen een breedte en hoogte ingesteld, daarom wordt de waarde stretch voor de eigenschap align-items genegeerd:

<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;
}

Voorbeeld . Waarde flex-start zonder elementafmetingen

Momenteel zullen de elementen tegen de bovenkant worden aangedrukt:

<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;
}

Voorbeeld . Waarde flex-start + elementafmetingen

Momenteel zullen de elementen nog steeds tegen de bovenkant worden aangedrukt, maar ze hebben nu een ingestelde breedte en hoogte:

<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;
}

Voorbeeld . Waarde flex-end + elementafmetingen

Momenteel zullen de elementen tegen de onderkant worden aangedrukt:

<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;
}

Voorbeeld . Waarde center + elementafmetingen

Momenteel zullen de elementen in het midden van de dwarsas staan (in dit geval verticaal):

<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;
}

Voorbeeld . Waarde center, elementen van verschillende grootte

Momenteel hebben de elementen verschillende hoogtes (op dit moment worden ze uitgerekt door de tekst, maar je kunt ook height instellen), de breedte is voor allemaal hetzelfde, omdat de eigenschap width is ingesteld:

<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;
}

Voorbeeld . Waarde baseline, elementen van verschillende grootte

En zo ziet uitlijning volgens de basislijn eruit:

<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;
}

Voorbeeld . Uitlijning volgens het begin van de verticale as in een grid

Laten we onze elementen binnen de cellen uitlijnen volgens het begin van de verticale as:

<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;
}

En laten we nu naar ons grid kijken in de browserdebugger:

Voorbeeld . Uitlijning in het midden van de verticale as in een grid

En laten we nu onze elementen in de cellen uitlijnen in het midden van de verticale as:

<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;
}

Laten we kijken naar de weergave van het grid in de debugger:

Voorbeeld . Uitlijning volgens het einde van de verticale as in een grid

Laten we de uitlijning van de elementen opnieuw aanpassen, deze keer volgens het einde van de verticale as:

<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 {
	
}

En laten we nu kijken hoe ons grid eruitziet via de debugger:

Zie ook

eigenschap flex-direction,
die de richting van de assen van flex containers bepaalt
eigenschap justify-content,
die de uitlijning langs de hoofdasa bepaalt
eigenschap align-items,
die de uitlijning langs de dwarsas bepaalt
eigenschap flex-wrap,
die de meerdere regels voor flex containers bepaalt
eigenschap flex-flow,
afkorting voor flex-direction en flex-wrap
eigenschap order,
die de volgorde van flex elementen bepaalt
eigenschap align-self,
die de uitlijning van één enkel element bepaalt
eigenschap flex-basis,
die de grootte van een specifiek flex element bepaalt
eigenschap flex-grow,
die de 'gulzigheid' van flex elementen bepaalt
eigenschap flex-shrink,
die de inkrimping van flex elementen bepaalt
eigenschap flex,
afkorting voor flex-grow, flex-shrink en flex-basis