Egenskapen align-self

Egenskapen align-self sätter justeringen längs tväraxeln för ett enskilt flex-block och längs den vertikala axeln för ett enskilt element i ett grid. I grund och botten representerar denna egenskap egenskapen align-items, men för ett specifikt block.

Syntax

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

Värden

Värde	Beskrivning
`flex-start`	Blocket är tryckt mot början av tväraxeln.
`flex-end`	Blocket är tryckt mot slutet av tväraxeln.
`center`	Blocket är centrerat längs tväraxeln.
`baseline`	Blocket justeras efter sin baslinje. Baslinjen är en imaginär linje, som går längs nedre kanten av tecken utan hänsyn till nedåtgående delar, till exempel som hos bokstäverna `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Blocket är sträckt och tar upp all tillgänglig plats längs tväraxeln, men ändå beaktas `min-width` och `max-width`, om de är satta. Om bredd och höjd är satta för elementet - kommer `stretch` att ignoreras.
`auto`	Blocket kommer att justeras så som anges i egenskapen `align-items`.

Standardvärde: auto.

Exempel . Värdet stretch

I detta exempel har alla block fått värdet flex-start (egenskapen align-items), och det tredje blocket - align-self med värdet 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;
}

Exempel . Värdet flex-end

I detta exempel har alla block för egenskapen align-items fått värdet flex-start, och det tredje blocket - align-self med värdet 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;
}

Exempel . Justering mot början av den vertikala axeln i grid

Låt oss sätta justeringen för det första elementet mot början av den vertikala axeln:

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

Exempel . Justering i mitten av den vertikala axeln i grid

Låt oss sätta justeringen för det första elementet i mitten av den vertikala axeln:

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

Exempel . Justering mot slutet av den vertikala axeln i grid

Låt oss sätta justeringen för vårt första element i grid mot slutet av den vertikala axeln:

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

Se även

egenskapen flex-direction,
som sätter riktningen på flex-blockens axlar
egenskapen justify-content,
som sätter justeringen längs huvudaxeln
egenskapen align-items,
som sätter justeringen längs tväraxeln
egenskapen flex-wrap,
som sätter flerradighet för flex-block
egenskapen flex-flow,
förkortning för flex-direction och flex-wrap
egenskapen order,
som sätter ordningen på flex-block
egenskapen flex-basis,
som sätter storleken på ett specifikt flex-block
egenskapen flex-grow,
som sätter "girighet" för flex-block
egenskapen flex-shrink,
som sätter komprimerbarhet för flex-block
egenskapen flex,
förkortning för flex-grow, flex-shrink och flex-basis