Ominaisuus align-items

Ominaisuus align-items asettaa elementtien kohdistuksen poikittaistakselia pitkin flex-lohkoille ja pystytasossa grid-elementeille. Sovelletaan vanhempaelementtiin.

Syntaksi

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

Arvot

Arvo	Kuvaus
`flex-start`	Lohkot painuvat poikittaistason (pystysuoran) akselin alkuun.
`flex-end`	Lohkot painuvat poikittaistason (pystysuoran) akselin loppuun.
`center`	Lohkot sijaitsevat poikittaistason (pystysuoran) akselin keskellä.
`baseline`	Elementit kohdistetaan oman perusviivansa mukaan. Perusviiva on kuviteltu viiva, joka kulkee merkkien alareunan mukaisesti ilman alaspäin roikkuvia osia, kuten kirjaimilla `'p'` ja `'y'`.
`stretch`	Lohkot venyvät käyttämällä kaiken saatavilla olevan tilan poikittaistakselia pitkin, mutta silti otetaan huomioon `min-width` ja `max-width`, jos ne on asetettu. Jos elementeille on asetettu leveys ja korkeus - `stretch` ohitetaan.

Oletusarvo: stretch.

Esimerkki . Arvo stretch

Nyt päätasokuva on suunnattu vasemmalta oikealle, ja poikittaistakselia pitkin elementit venyvät koko korkeuteen:

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

Esimerkki . Arvo stretch + elementin koot

Nyt elementeille on asetettu leveys ja korkeus, joten arvoa stretch ominaisuudelle align-items ei huomioida:

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

Esimerkki . Arvo flex-start ilman elementin kokoa

Nyt elementit painuvat ylös:

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

Esimerkki . Arvo flex-start + elementin koot

Nyt elementit edelleen painuvat ylös, mutta niillä on asetettu leveys ja korkeus:

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

Esimerkki . Arvo flex-end + elementin koot

Nyt elementit painuvat alas:

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

Esimerkki . Arvo center + elementin koot

Nyt elementit sijaitsevat keskellä poikittaistakselia (tässä tapauksessa pystysuunnassa):

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

Esimerkki . Arvo center, elementit eri kokoisia

Nyt elementeillä on eri korkeus (ne venyvät tekstin mukaan, mutta voitaisiin asettaa myös height), leveys on kaikilla sama, koska ominaisuus width on asetettu:

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

Esimerkki . Arvo baseline, elementit eri kokoisia

Näin perusviivan mukainen kohdistus näyttää:

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

Esimerkki . Kohdistus pystyakselin alkuun gridissä

Kohdistetaan elementtimme solujen sisällä pystyakselin alkuun:

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

Katsotaan nyt gridiämme selaimen debuggerissa:

Esimerkki . Kohdistus pystyakselin keskelle gridissä

Kohdistetaan nyt elementtimme solujen sisällä pystyakselin keskelle:

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

Katsotaan gridin näkymää debuggerissa:

Esimerkki . Kohdistus pystyakselin loppuun gridissä

Muutetaan taas elementtien kohdistusta, tällä kertaa pystyakselin loppuun:

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

Katsotaan miltä gridimme näyttää debuggerin kautta:

Katso myös

ominaisuus flex-direction,
joka asettaa flex-lohkojen akselien suunnan
ominaisuus justify-content,
joka asettaa kohdistuksen päätasoa pitkin
ominaisuus align-items,
joka asettaa kohdistuksen poikittaistakselia pitkin
ominaisuus flex-wrap,
joka monirivisyys flex-lohkoille
ominaisuus flex-flow,
lyhenne flex-direction:lle ja flex-wrap:lle
ominaisuus order,
joka asettaa flex-lohkojen järjestyksen
ominaisuus align-self,
joka asettaa yhden lohkon kohdistuksen
ominaisuus flex-basis,
joka asettaa tietyn flex-lohkon koon
ominaisuus flex-grow,
joka asettaa flex-lohkojen ahneuden
ominaisuus flex-shrink,
joka asettaa flex-lohkojen kutistuvuuden
ominaisuus flex,
lyhenne flex-grow:lle, flex-shrink:lle ja flex-basis:lle