Vetia place-content

Vetia place-content përcakton rreshtimin e elementeve përgjatë boshteve kryesore dhe tërthore për elementët fleks, dhe përgjatë boshteve horizontale dhe vertikale për grid-a. Vlera e parë përcakton rreshtimin përgjatë boshtit kryesor (horizontal), vlera e dytë - përgjatë boshtit tërthor (vertikal). Vetia aplikohet në elementin prind.

Sintaksa

selektor {
	place-content: boshti_kryesor boshti_tërthor;
}

Shembull . Rreshtim përgjatë fillimit të boshtit kryesor dhe në qendër të boshtit tërthor

Tani elementët janë të shtypur në pjesën e sipërme të boshtit kryesor dhe njëkohësisht ndodhen në qendër të boshtit tërthor:

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

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

Shembull . Rreshtim në qendër të boshtit kryesor dhe në fund të boshtit tërthor

Dhe tani elementët janë të pozicionuar në qendër të boshtit kryesor dhe në fund të boshtit tërthor:

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

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

Shembull . Rreshtim në fund të boshtit kryesor dhe në fillim të boshtit tërthor

Këtu elementët janë të shtypur në pjesën e poshtme të boshtit kryesor dhe njëkohësisht në fillim të boshtit tërthor:

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

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

Shembull . Rreshtim në fillim të boshtit vertikal dhe në fund të boshtit horizontal në grid

Le t'i rreshtojmë elementët tanë në fillim të boshtit vertikal dhe në fund të boshtit horizontal:

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

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

Shembull . Rreshtim në qendër të boshtit vertikal dhe në fillim të boshtit horizontal në grid

Le t'i rreshtojmë elementët tanë në qendër të boshtit vertikal dhe në fillim të boshtit horizontal:

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

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

Shembull . Rreshtim në fund të boshtit vertikal dhe në fillim të boshtit horizontal në grid

Le t'i rreshtojmë elementët tanë në fund të boshtit vertikal dhe në fillim të boshtit horizontal:

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

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

Shihni gjithashtu

vetia align-content,
e cila përcakton rreshtimin përgjatë boshtit tërthor ose vertikal
vetia justify-content,
e cila përcakton rreshtimin përgjatë boshtit kryesor