Svojstvo align-self

Svojstvo align-self zadaje poravnavanje duž poprečne ose za pojedinačni flex-blok i po vertikalnoj osi za pojedinačni element u grid-u. U suštini ovo svojstvo predstavlja svojstvo align-items, ali za konkretan blok.

Sintaksa

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

Vrednosti

Vrednost	Opis
`flex-start`	Blok je priljubljen na početak poprečne ose.
`flex-end`	Blok je priljubljen na kraj poprečne ose.
`center`	Blok je centriran duž poprečne ose.
`baseline`	Blok se poravnava prema svojoj bazalnoj liniji. Bazalna linija - to je zamišljena linija, koja prolazi kroz donji rub simbola bez obzira na visak, na primer, kao kod slova `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Blok je rastegnut, zauzimajući svo dostupno mesto duž poprečne ose, pri čemu se ipak uzimaju u obzir `min-width` i `max-width`, ako su zadati. Ako je zadata širina i visina za element - `stretch` će biti zanemaren.
`auto`	Blok će biti poravnat onako kako je zadato u svojstvu `align-items`.

Podrazumevana vrednost: auto.

Primer . Vrednost stretch

U ovom primeru svim blokovima je zadata vrednost flex-start (svojstvo align-items), a trećem bloku - align-self u vrednosti 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;
}

Primer . Vrednost flex-end

U ovom primeru svim blokovima za svojstvo align-items je zadata vrednost flex-start, a trećem bloku - align-self u vrednosti 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;
}

Primer . Poravnavanje po početku vertikalne ose u grid-u

Postavimo poravnavanje za prvi element po početku vertikalne ose:

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

Primer . Poravnavanje po centru vertikalne ose u grid-u

Postavimo poravnavanje prvog elementa po centru vertikalne ose:

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

Primer . Poravnavanje po kraju vertikalne ose u grid-u

Postavimo poravnavanje za naš prvi element u grid-u po kraju vertikalne ose:

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

Pogledajte takođe

svojstvo flex-direction,
koje zadaje smer osa flex blokova
svojstvo justify-content,
koje zadaje poravnavanje po glavnoj osi
svojstvo align-items,
koje zadaje poravnavanje po poprečnoj osi
svojstvo flex-wrap,
koje zadaje višelinijski raspored flex blokova
svojstvo flex-flow,
skraćenica za flex-direction i flex-wrap
svojstvo order,
koje zadaje redosled flex blokova
svojstvo flex-basis,
koje zadaje veličinu konkretnog flex bloka
svojstvo flex-grow,
koje zadaje "pohlepu" flex blokova
svojstvo flex-shrink,
koje zadaje sažimanje flex blokova
svojstvo flex,
skraćenica za flex-grow, flex-shrink i flex-basis