Ominaisuus align-content

Ominaisuus align-content määrittää elementtien tasauksen poikittaisakselia pitkin flex-lohkoille ja pystysuoraa akselia pitkin grideille. Sovelletaan vanhempaelementtiin.

Syntaksi

valitsija {
	align-content: flex-start | flex-end | center | space-between | space-around;
}

Arvot

Arvo	Kuvaus
`flex-start`	Lohkot on painettu poikittaisen (pystysuoran) akselin alkuun.
`flex-end`	Lohkot on painettu poikittaisen (pystysuoran) akselin loppuun.
`center`	Lohkot sijaitsevat poikittaisen (pystysuoran) akselin keskellä.
`space-between`	Lohkot on jaettu poikittaisen (pystysuoran) akselin suunnassa, kun ensimmäinen elementti on painettu akselin alkuun, ja viimeinen - loppuun.
`space-around`	Lohkot on jaettu poikittaisen (pystysuoran) akselin suunnassa, kun ensimmäisen lohkon ja akselin alun, viimeisen lohkon ja akselin lopun välillä on sama väli, kuin muiden lohkojen välillä. Ne eivät kuitenkaan ole yhtä suuret, kuten voisi luulla: välit lasketaan yhteen ja kahden lohkon välillä etäisyys on kaksi kertaa suurempi kuin lohkon ja akselin alun/lopun välillä.

Esimerkki . Arvo flex-start

Tässä esimerkissä akseli, jota pitkin tasaus tapahtuu on suunnattu ylhäältä alas, ts. se on poikittainen. Kuten saadusta tuloksesta voidaan nähdä, kaikki elementtimme on painettu sen yläosaan:

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Esimerkki . Arvo flex-end

Tässä esimerkissä lohkot on painettu poikittaisen akselin alaosaan, koska ominaisuudelle align-content on asetettu arvoksi flex-end:

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Esimerkki . Arvo center

Nyt lohkot on kohdistettu poikittaisen akselin keskelle:

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

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Tasaus pystysuoran akselin alkuun gridissä

Asetetaan elementtiemme tasaus gridissä pystysuoran akselin alkuun:

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

#parent {
	display: grid;
	align-content: 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;
}

Tasaus pystysuoran akselin keskelle gridissä

Asetetaan nyt elementtien tasaus pystysuoran akselin keskelle:

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

#parent {
	display: grid;
	align-content: 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;
}

Tasaus pystysuoran akselin loppuun gridissä

Asetetaan elementtien tasaus pystysuoran akselin loppuun:

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

#parent {
	display: grid;
	align-content: 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;
}

Katso myös

ominaisuus flex-direction,
joka määrittää flex-lohkojen akselien suunnan
ominaisuus justify-content,
joka määrittää tasauksen pääakselia pitkin
ominaisuus align-items,
joka määrittää tasauksen poikittaisakselia pitkin
ominaisuus flex-wrap,
joka määrittää flex-lohkojen monirivisyyden
ominaisuus flex-flow,
lyhenne flex-directionille ja flex-wraplle
ominaisuus order,
joka määrittää flex-lohkojen järjestyksen
ominaisuus align-self,
joka määrittää yhden lohkon tasauksen
ominaisuus place-content,
joka määrittää tasauksen pää- ja poikittaisakseleita pitkin