Eigenschap align-self

De eigenschap align-self bepaalt de uitlijning langs de dwarsas voor een individueel flex-blok en langs de verticale as voor een individueel element in een grid. In essentie vertegenwoordigt deze eigenschap de eigenschap align-items, maar dan voor een specifiek blok.

Syntaxis

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

Waarden

Waarde	Beschrijving
`flex-start`	Het blok wordt tegen het begin van de dwarsas aangesloten.
`flex-end`	Het blok wordt tegen het einde van de dwarsas aangesloten.
`center`	Het blok staat in het midden van de dwarsas.
`baseline`	Het blok wordt uitgelijnd volgens zijn basislijn. De basislijn is een denkbeeldige lijn, die langs de onderkant van de symbolen loopt zonder de afhangende delen mee te rekenen, zoals bij de letters `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Het blok wordt uitgerekt en neemt 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 het element zijn ingesteld - wordt `stretch` genegeerd.
`auto`	Het blok wordt uitgelijnd zoals ingesteld in de eigenschap `align-items`.

Standaardwaarde: auto.

Voorbeeld . Waarde stretch

In dit voorbeeld is voor alle blokken de waarde flex-start ingesteld (eigenschap align-items), en voor het derde blok - align-self met de waarde stretch:

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

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

Voorbeeld . Waarde flex-end

In dit voorbeeld is voor alle blokken voor de eigenschap align-items de waarde flex-start ingesteld, en voor het derde blok - align-self met de waarde flex-end:

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

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

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

Laten we de uitlijning voor het eerste element instellen op het begin van de verticale as:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 {
	align-self: start;
}

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

Laten we de uitlijning van het eerste element instellen in het midden van de verticale as:

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 {
	align-self: center;
}

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

Laten we de uitlijning voor ons eerste element in het grid instellen op het einde van de verticale as:

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 {
	align-self: end;
}

Zie ook

eigenschap flex-direction,
die de richting van de assen van flex blokken bepaalt
eigenschap justify-content,
die de uitlijning langs de hoofdast bepaalt
eigenschap align-items,
die de uitlijning langs de dwarsas bepaalt
eigenschap flex-wrap,
die de meerdere regels van flex blokken bepaalt
eigenschap flex-flow,
afkorting voor flex-direction en flex-wrap
eigenschap order,
die de volgorde van flex blokken bepaalt
eigenschap flex-basis,
die de grootte van een specifiek flex blok bepaalt
eigenschap flex-grow,
die de 'hebzucht' van flex blokken bepaalt
eigenschap flex-shrink,
die de krimpbaarheid van flex blokken bepaalt
eigenschap flex,
afkorting voor flex-grow, flex-shrink en flex-basis