Īpašība align-self

Īpašība align-self iestata izlīdzināšanu šķērsasijai atsevišķam flex-blokam un vertikālajai asij atsevišķam elementam gridā. Būtībā šī īpašība pārstāv align-items īpašību, bet konkrētam blokam.

Sintakse

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

Vērtības

Vērtība	Apraksts
`flex-start`	Bloks ir piespiests šķērsasijas sākumam.
`flex-end`	Bloks ir piespiests šķērsasijas beigām.
`center`	Bloks atrodas šķērsasijas centrā.
`baseline`	Bloks tiek izlīdzināts pa savu pamatlīniju. Pamatlīnija ir iedomāta līnija, kas iet gar burtu apakšējo malu, neņemot vērā izvirzījumus, piemēram, kā burtiem `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Bloks ir izstiepts, aizņemot visu pieejamo vietu pa šķērsasi, tomēr tiek ņemti vērā `min-width` un `max-width`, ja tie ir iestatīti. Ja elementam ir iestatīts platums un augstums - `stretch` tiks ignorēts.
`auto`	Bloks tiks izlīdzināts tā, kā iestatīts `align-items` īpašībā.

Noklusējuma vērtība: auto.

Piemērs . Vērtība stretch

Šajā piemērā visiem blokiem ir iestatīta vērtība flex-start (īpašība align-items), bet trešajam blokam - align-self ar vērtību 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;
}

Piemērs . Vērtība flex-end

Šajā piemērā visiem blokiem align-items īpašībai iestatīta vērtība flex-start, bet trešajam blokam - align-self ar vērtību 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;
}

Piemērs . Izlīdzināšana vertikālās ass sākumā gridā

Iestatīsim izlīdzināšanu pirmajam elementam vertikālās ass sākumā:

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

Piemērs . Izlīdzināšana vertikālās ass centrā gridā

Iestatīsim pirmā elementa izlīdzināšanu vertikālās ass centrā:

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

Piemērs . Izlīdzināšana vertikālās ass beigās gridā

Iestatīsim izlīdzināšanu mūsu pirmajam elementam gridā vertikālās ass beigās:

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

Skatiet arī

īpašība flex-direction,
kas iestata flex bloku asu virzienu
īpašība justify-content,
kas iestata izlīdzināšanu pa galveno asi
īpašība align-items,
kas iestata izlīdzināšanu pa šķērsasi
īpašība flex-wrap,
kas iestata flex bloku daudzrindu
īpašība flex-flow,
saīsinājums priekš flex-direction un flex-wrap
īpašība order,
kas iestata flex bloku secību
īpašība flex-basis,
kas iestata konkrēta flex bloka izmēru
īpašība flex-grow,
kas iestata flex bloku alkatību
īpašība flex-shrink,
kas iestata flex bloku saspiežamību
īpašība flex,
saīsinājums priekš flex-grow, flex-shrink un flex-basis