Az align-items tulajdonság

A align-items tulajdonság az elemek igazítását határozza meg a keresztirányú tengely mentén flex tárolók esetén és a függőleges tengely mentén grid tárolók esetén. A szülő elemre alkalmazandó.

Szintaxis

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

Értékek

Érték	Leírás
`flex-start`	A blokkok a keresztirányú (függőleges) tengely elejéhez igazodnak.
`flex-end`	A blokkok a keresztirányú (függőleges) tengely végéhez igazodnak.
`center`	A blokkok a keresztirányú (függőleges) tengely közepéhez igazodnak.
`baseline`	Az elemek a saját alapvonalukhoz igazodnak. Az alapvonal egy képzeletbeli vonal, amely a karakterek alja mentén fut, anélkül, hogy figyelembe venné a lekérő részeket, mint például a `'p'` és a `'y'` betűknél.
`stretch`	A blokkok kitöltik a rendelkezésre álló teret a keresztirányú tengely mentén, figyelembe véve a `min-width` és `max-width` értékeket, ha meg vannak adva. Ha az elemeknek meg van adva szélessége és magassága - a `stretch` érték figyelmen kívül lesz hagyva.

Alapértelmezett érték: stretch.

Példa . Stretch érték

Jelenleg a főtengely balról jobbra irányul, a keresztirányú tengely mentén pedig az elemek kitöltenek a teljes magasságot:

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

Példa . Stretch érték + elem méretei

Jelenleg az elemeknek meg van adva szélessége és magassága, ezért a stretch érték a align-items tulajdonsághoz figyelmen kívül lesz hagyva:

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

Példa . Flex-start érték elem méretek nélkül

Jelenleg az elemek a tetejéhez igazodnak:

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

Példa . Flex-start érték + elem méretei

Jelenleg az elemek továbbra is a tetejéhez igazodnak, azonban megadott szélességük és magasságuk lesz:

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

Példa . Flex-end érték + elem méretei

Jelenleg az elemek az aljához igazodnak:

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

Példa . Center érték + elem méretei

Jelenleg az elemek a keresztirányú tengely (jelen esetben függőleges) közepéhez igazodnak:

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

Példa . Center érték, különböző méretű elemek

Jelenleg az elemek magassága eltérő (jelenleg a szöveg határozza meg, de megadható a height is), a szélesség minden elemnél azonos, mivel a width tulajdonság meg van adva:

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

Példa . Baseline érték, különböző méretű elemek

Így néz ki az igazítás az alapvonal szerint:

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

Példa . Igazítás a függőleges tengely elején a gridben

Igazítsuk az elemeinket a cellákon belül a függőleges tengely elejéhez:

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

Most pedig nézzük meg a gridet a böngésző fejlesztői eszközében:

Példa . Igazítás a függőleges tengely közepén a gridben

Most igazítsuk az elemeinket a cellákon belül a függőleges tengely közepéhez:

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

Nézzük meg a grid megjelenítését a fejlesztői eszközben:

Példa . Igazítás a függőleges tengely végén a gridben

Módosítsuk ismét az elemek igazítását, ezúttal a függőleges tengely végéhez:

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

Most pedig nézzük meg, hogyan néz ki a gridünk a fejlesztői eszközben:

Lásd még

a flex-direction tulajdonság,
amely a flex tárolók tengelyeinek irányát határozza meg
a justify-content tulajdonság,
amely a főtengely menti igazítást határozza meg
a align-items tulajdonság,
amely a keresztirányú tengely menti igazítást határozza meg
a flex-wrap tulajdonság,
amely a flex tárolók több sorosságát határozza meg
a flex-flow tulajdonság,
rövidítés a flex-direction és flex-wrap számára
a order tulajdonság,
amely a flex blokkok sorrendjét határozza meg
a align-self tulajdonság,
amely egyetlen blokk igazítását határozza meg
a flex-basis tulajdonság,
amely egy adott flex blokk méretét határozza meg
a flex-grow tulajdonság,
amely a flex blokkok "kapzsiságát" határozza meg
a flex-shrink tulajdonság,
amely a flex blokkok összenyomhatóságát határozza meg
a flex tulajdonság,
rövidítés a flex-grow, flex-shrink és flex-basis számára