Az align-self tulajdonság

A align-self tulajdonság egyedi flex-blokk keresztirányú tengely menti igazítását és egyedi grid elem függőleges tengely menti igazítását határozza meg. Lényegében ez a tulajdonság a align-items tulajdonság speciális változata, de egy konkrét blokkra vonatkozik.

Szintaxis

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

Értékek

Érték	Leírás
`flex-start`	A blokk a keresztirányú tengely elejéhez igazodik.
`flex-end`	A blokk a keresztirányú tengely végéhez igazodik.
`center`	A blokk a keresztirányú tengely középen igazodik.
`baseline`	A blokk az alapvonala mentén igazodik. Az alapvonal egy képzeletbeli vonal, amely a karakterek alján halad el, figyelmen kívül hagyva a kinyúló részeket, mint például a `'p'`, `'q'`, `'y'`, `'g'` betűknél.
`stretch`	A blokk nyújtva van, elfoglalva az összes elérhető helyet a keresztirányú tengely mentén, eközben figyelembe veszi a `min-width` és `max-width` értékeket, ha meg lettek adva. Ha az elem számára meg van adva szélesség és magasság - a `stretch` értéket figyelmen kívül hagyjuk.
`auto`	A blokk a `align-items` tulajdonságban megadott módon lesz igazítva.

Alapértelmezett érték: auto.

Példa . Stretch érték

Ebben a példában az összes blokk a flex-start értéket kapta (a align-items tulajdonság), míg a harmadik blokk a align-self tulajdonságot stretch értékkel:

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

Példa . Flex-end érték

Ebben a példában az összes blokk a align-items tulajdonságnál a flex-start értéket kapta, míg a harmadik blokk a align-self tulajdonságot flex-end értékkel:

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

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

Állítsuk be az első elem igazítását a függőleges tengely elején:

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

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

Állítsuk be az első elem igazítását a függőleges tengely közepén:

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

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

Állítsuk be az első elem igazítását a függőleges tengely végén a gridben:

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

Lásd még

a flex-direction tulajdonság,
amely a flex blokkok tengelyirá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 blokkok többsoros elrendezésé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 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