Vetoria align-items

Vetoria align-items përcakton radhitjen e elementeve përgjatë boshtit kryq për blloqet flex dhe përgjatë boshtit vertikal për gridat. Aplikohet në elementin prind.

Sintaksa

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

Vlerat

Vlera	Përshkrimi
`flex-start`	Blloqet janë të shtypura në fillim të boshtit kryq (vertikal).
`flex-end`	Blloqet janë të shtypura në fund të boshtit kryq (vertikal).
`center`	Blloqet janë në qendër të boshtit kryq (vertikal).
`baseline`	Elementet radhiten sipas vijës së tyre bazë. Vija bazë është një vijë e imaginuar që kalon përgjatë skajit të poshtëm të simbolve pa marrë parasysh varësitë, për shembull, si shkronjat `'p'` dhe `'y'`.
`stretch`	Blloqet janë të zgjatura, 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ë të përcaktuara. Nëse është përcaktuar gjerësia dhe lartësia për elementet - `stretch` do të injorohet.

Vlera e paracaktuar: stretch.

Shembull . Vlera stretch

Tani boshti kryesor është i drejtuar nga e majta në të djathtë, dhe përgjatë boshtit kryq elementet janë të zgjatura në tërë lartësinë:

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

Shembull . Vlera stretch + përmasat e elementit

Tani për elementet është përcaktuar gjerësia dhe lartësia, prandaj vlera stretch për vetinë align-items do të injorohet:

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

Shembull . Vlera flex-start pa përmasa të elementit

Tani elementet do të jenë të shtypura në krye:

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

Shembull . Vlera flex-start + përmasat e elementit

Tani elementet përsëri do të jenë të shtypur në krye, megjithatë ato do të kenë gjerësinë e përcaktuar dhe lartësinë:

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

Shembull . Vlera flex-end + përmasat e elementit

Tani elementet do të jenë të shtypur në fund:

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

Shembull . Vlera center + përmasat e elementit

Tani elementet do të qëndrojnë në qendër përgjatë boshtit kryq (në këtë rast vertikalisht):

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

Shembull . Vlera center, elemente me përmasa të ndryshme

Tani elementet kanë përmasa të ndryshme në lartësi (tani ato zgjerohen nga teksti, por mund të përcaktohet edhe height), gjerësia është e njëjtë për të gjithë, pasi është përcaktuar vetia width:

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

Shembull . Vlera baseline, elemente me përmasa të ndryshme

Dhe kështu duket radhitja sipas vijës bazë:

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

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

Le t'i radhisim elementet tona brenda qelizave në fillim të boshtit vertikal:

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

Dhe tani le të shohim grid-in tonë në debuger të shfletuesit:

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

Dhe tani le t'i radhisim elementet tona në qeliza në qendër të boshtit vertikal:

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

Le të shohim shfaqjen e grid-it në debuger:

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

Përsëri le të ndryshojmë radhitjen e elementeve, këtë herë në fund të boshtit vertikal:

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

Dhe tani le të shohim se si duket grid-i ynë përmes debuger-it:

Shihni gjithashtu

vetia flex-direction,
e cila përcakton drejtimin e boshteve të blloqeve flex
vetia justify-content,
e cila përcakton radhitjen përgjatë boshtit kryesor
vetia align-items,
e cila përcakton radhitjen 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 renditjen e blloqeve flex
vetia align-self,
e cila përcakton radhitjen e një blloku
vetia flex-basis,
e cila përcakton përmasat e një blloku specifik flex
vetia flex-grow,
e cila përcakton lakminë e blloqeve flex
vetia flex-shrink,
e cila përcakton tkurrshmërinë e blloqeve flex
vetia flex,
shkurtim për flex-grow, flex-shrink dhe flex-basis