Vetia align-content

Vetia align-content përcakton rreshtimin e elementeve përgjatë boshtit kryq për blloqet flex dhe përgjatë boshtit vertikal për grid-at. Aplikohet në elementin prind.

Sintaksa

selektor {
	align-content: flex-start | flex-end | center | space-between | space-around;
}

Vlerat

Vlera	Përshkrimi
`flex-start`	Blloqet janë shtypur në fillim të boshtit kryq (vertikal).
`flex-end`	Blloqet janë shtypur në fund të boshtit kryq (vertikal).
`center`	Blloqet janë vendosur në qendër të boshtit kryq (vertikal).
`space-between`	Blloqet shpërndahen përgjatë boshtit kryq (vertikal), ku elementi i parë është shtypur në fillim të boshtit, dhe i fundit - në fund.
`space-around`	Blloqet shpërndahen përgjatë boshtit kryq (vertikal), ku midis bllokut të parë dhe fillimit të boshtit, bllokut të fundit dhe fundit të boshtit ka të njëjtin hapësirë, si dhe midis blloqeve të tjera. Sidoqoftë, ato nuk janë të barabarta, siç mund të duket: hapësirat mblidhen dhe midis dy blloqeve distanca është dy herë më e madhe, se midis bllokut dhe fillimit/fundit të boshtit.

Shembull . Vlera flex-start

Në këtë shembull, boshti, përgjatë të cilit bëhet rreshtimi është i drejtuar nga lart poshtë, d.m.th. ai është kryq. Siç shihet nga rezultati i marrë, të gjithë elementët tanë janë shtypur në pjesën e sipërme të saj:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Shembull . Vlera flex-end

Në këtë shembull blloqet janë shtypur në anën e poshtme të boshtit kryq, pasi vetia align-content është caktuar në vlerën flex-end:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Shembull . Vlera center

Tani blloqet janë rreshtuar në qendër të boshtit kryq:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Rreshtimi në fillim të boshtit vertikal në grid

Le të vendosim rreshtimin për elementët tanë në grid në fillim të boshtit vertikal:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	align-content: 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;
}

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

Dhe tani le të vendosim rreshtimin e elementeve në qendër të boshtit vertikal:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	align-content: 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;
}

Rreshtimi në fund të boshtit vertikal në grid

Le të vendosim rreshtimin e elementeve në fund të boshtit vertikal:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	align-content: 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;
}

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 align-self,
e cila përcakton rreshtimin e një blloku
vetia place-content,
e cila përcakton rreshtimin përgjatë boshteve kryesore dhe kryq