Ominaisuus align-self

Ominaisuus align-self määrittää kohdistuksen poikittaistakselilla yksittäiselle flex-elementille ja pystyakselilla yksittäiselle elementille gridissä. Käytännössä tämä ominaisuus on align-items-ominaisuuden kaltainen, mutta kohdistuu vain tiettyyn elementtiin.

Syntaksi

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

Arvot

Arvo	Kuvaus
`flex-start`	Elementti on kiinni poikittaistakselin alussa.
`flex-end`	Elementti on kiinni poikittaistakselin lopussa.
`center`	Elementti on poikittaistakselin keskellä.
`baseline`	Elementti kohdistetaan oman perusviivansa mukaan. Perusviiva on kuvitteellinen viiva, joka kulkee merkkien alaosan alimmasta kohdasta ilman alaspäin ulkonevia osia, kuten kirjaimilla `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Elementti on venytetty käyttämään kaiken saatavilla olevan tilan poikittaistakselilla, mutta `min-width` ja `max-width` otetaan silti huomioon, jos ne on määritetty. Jos elementille on määritetty leveys ja korkeus - `stretch` ohitetaan.
`auto`	Elementti kohdistetaan niin kuin `align-items`-ominaisuudessa on määritetty.

Oletusarvo: auto.

Esimerkki . Arvo stretch

Tässä esimerkissä kaikille elementeille on asetettu arvo flex-start (ominaisuus align-items), ja kolmannelle elementille - align-self arvolla 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;
}

Esimerkki . Arvo flex-end

Tässä esimerkissä kaikille elementeille ominaisuudelle align-items on asetettu arvo flex-start, ja kolmannelle elementille - align-self arvolla 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;
}

Esimerkki . Kohdistus pystyakselin alkuun gridissä

Asetetaan ensimmäisen elementin kohdistus pystyakselin alkuun:

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

Esimerkki . Kohdistus pystyakselin keskelle gridissä

Asetetaan ensimmäisen elementin kohdistus pystyakselin keskelle:

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

Esimerkki . Kohdistus pystyakselin loppuun gridissä

Asetetaan ensimmäisen elementin kohdistus gridissä pystyakselin loppuun:

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

Katso myös

ominaisuus flex-direction,
joka määrittää flex-elementtien akselien suunnan
ominaisuus justify-content,
joka määrittää kohdistuksen päätasolla
ominaisuus align-items,
joka määrittää kohdistuksen poikittaistakselilla
ominaisuus flex-wrap,
joka määrittää flex-elementtien monirivisyyden
ominaisuus flex-flow,
lyhenne flex-directionille ja flex-wraplle
ominaisuus order,
joka määrittää flex-elementtien järjestyksen
ominaisuus flex-basis,
joka määrittää tietyn flex-elementin koon
ominaisuus flex-grow,
joka määrittää flex-elementtien "ahneuden"
ominaisuus flex-shrink,
joka määrittää flex-elementtien kutistuvuuden
ominaisuus flex,
lyhenne flex-grow-, flex-shrink- ja flex-basis-ominaisuuksille