Vetia align-self

Vetia align-self përcakton rreshtimin përgjatë boshtit kryq për një bllok flex individual dhe përgjatë boshtit vertikal për një element individual në grid. Në thelb kjo vetia përfaqëson vetinë align-items, por për një bllok specifik.

Sintaksa

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

Vlerat

Vlera	Përshkrimi
`flex-start`	Blloku është ngjitur në fillimin e boshtit kryq.
`flex-end`	Blloku është ngjitur në fundin e boshtit kryq.
`center`	Blloku është në qendër të boshtit kryq.
`baseline`	Blloku rreshtohet sipas vijës së tij bazë. Vija bazë është një vijë e imagjinuar, që kalon përgjatë skajit të poshtëm të karaktereve pa marrë parasysh pjesët e varura, për shembull, si në shkronjat `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Blloku është i shtrirë, duke zënë të gjithë hapësirën e disponueshme përgjatë boshtit kryq, por megjithatë merren parasysh `min-width` dhe `max-width`, nëse janë përcaktuar. Nëse është përcaktuar gjerësia dhe lartësia për elementin - `stretch` do të injorohet.
`auto`	Blloku do të rreshtohet ashtu siç është përcaktuar në vetinë `align-items`.

Vlera e paracaktuar: auto.

Shembull . Vlera stretch

Në këtë shembull, të gjithë blloqeve u është caktuar vlera flex-start (vetia align-items), ndërsa bllokut të tretë - align-self me vlerën 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;
}

Shembull . Vlera flex-end

Në këtë shembull, të gjithë blloqeve për vetinë align-items u është caktuar vlera flex-start, ndërsa bllokut të tretë - align-self me vlerën 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;
}

Shembull . Rreshtimi në fillim të boshtit vertikal në grid

Le të vendosim rreshtimin për elementin e parë në fillim të boshtit vertikal:

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

Shembull . Rreshtimi në qendër të boshtit vertikal në grid

Le të vendosim rreshtimin e elementit të parë në qendër të boshtit vertikal:

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

Shembull . Rreshtimi në fund të boshtit vertikal në grid

Le të vendosim rreshtimin për elementin tonë të parë në grid në fund të boshtit vertikal:

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

Shihni gjithashtu

vetia flex-direction,
e cila përcakton drejtimin e boshteve të blloqeve flex
vetia justify-content,
e cila përcakton rreshtimin përgjatë boshtit kryesor
vetia align-items,
e cila përcakton rreshtimin përgjatë boshtit kryq
vetia flex-wrap,
e cila përcakton shumë-rreshtshmërinë e blloqeve flex
vetia flex-flow,
shkurtim për flex-direction dhe flex-wrap
vetia order,
e cila përcakton rendin e blloqeve flex
vetia flex-basis,
e cila përcakton madhësinë e një blloku flex specifik
vetia flex-grow,
e cila përcakton lakminë e blloqeve flex
vetia flex-shrink,
e cila përcakton ngjeshshmërinë e blloqeve flex
vetia flex,
shkurtim për flex-grow, flex-shrink dhe flex-basis