Egenskaben align-self

Egenskaben align-self angiver justering langs den tværgående akse for en enkelt flex-blok og langs den lodrette akse for et enkelt element i et grid. I bund og grund repræsenterer denne egenskab egenskaben align-items, men for en specifik blok.

Syntaks

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

Værdier

Værdi	Beskrivelse
`flex-start`	Blokken er presset mod starten af den tværgående akse.
`flex-end`	Blokken er presset mod enden af den tværgående akse.
`center`	Blokken er placeret i midten af den tværgående akse.
`baseline`	Blokken justeres efter dens basislinje. Basislinjen er en imaginær linje, der løber langs bundkanten af symboler uden at tage højde for hængende dele, for eksempel som hos bogstaverne `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Blokken er strukket og optager al den tilgængelige plads langs den tværgående akse, dog tages der stadig højde for `min-width` og `max-width`, hvis de er angivet. Hvis bredde og højde er angivet for elementet - bliver `stretch` ignoreret.
`auto`	Blokken vil blive justeret som angivet i egenskaben `align-items`.

Standardværdi: auto.

Eksempel . Værdien stretch

I dette eksempel er alle blokke tildelt værdien flex-start (egenskaben align-items), og den tredje blok - align-self med værdien 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;
}

Eksempel . Værdien flex-end

I dette eksempel er alle blokke for egenskaben align-items tildelt værdien flex-start, og den tredje blok - align-self med værdien 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;
}

Eksempel . Justering mod starten af den lodrette akse i grid

Lad os angive justering for det første element mod starten af den lodrette akse:

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

Eksempel . Justering i midten af den lodrette akse i grid

Lad os angive justering af det første element i midten af den lodrette akse:

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

Eksempel . Justering mod enden af den lodrette akse i grid

Lad os angive justering for vores første element i griddet mod enden af den lodrette akse:

<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 også

egenskaben flex-direction,
som angiver retningen af flex-blokkes akser
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 fleksibilitet af flex-blokke
egenskaben flex-flow,
forkortelse for flex-direction og flex-wrap
egenskaben order,
som angiver rækkefølgen af flex-blokke
egenskaben flex-basis,
som angiver størrelsen på en specifik flex-blok
egenskaben flex-grow,
som angiver "grådigheden" af flex-blokke
egenskaben flex-shrink,
som angiver sammenpresseligheden af flex-blokke
egenskaben flex,
forkortelse for flex-grow, flex-shrink og flex-basis