Vetija justify-content

Vetija justify-content përcakton rreshtimin e elementeve përgjatë boshtit kryesor për blloqet flex dhe përgjatë boshtit horizontal për grid. Aplikohet në elementin prind.

Sintaksa

përzgjedhës {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Vlerat

Vlera	Përshkrimi
`flex-start`	Blloqet janë shtypur në fillim të boshtit kryesor (horizontal).
`flex-end`	Blloqet janë shtypur në fund të boshtit kryesor (horizontal).
`center`	Blloqet janë vendosur në qendër të boshtit kryesor (horizontal).
`space-between`	Blloqet shpërndahen përgjatë boshtit kryesor (horizontal), ku elementi i parë është shtypur në fillim të boshtit, ndërsa i fundit - në fund.
`space-around`	Blloqet shpërndahen përgjatë boshtit kryesor (horizontal), 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. Megjithatë, 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.

Vlera e paracaktuar: flex-start.

Shembull . Vlera flex-start

Tani boshti është i drejtuar nga e majta në të djathtë (këtë e bën flex-direction: row), ndërsa blloqet janë shtypur në anën e majtë:

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

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Shembull . Vlera flex-end

Në këtë shembull boshti është gjithashtu i drejtuar nga e majta në të djathtë, por blloqet janë shtypur në anën e djathtë, pasi është caktuar justify-content me vlerën flex-end:

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

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Shembull . Vlera center

Tani blloqet do të qëndrojnë në qendër pavarësisht nga drejtimi i boshtit kryesor:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Shembull . Vlera space-between

Blloqet shpërndahen përgjatë boshtit kryesor, ku elementi i parë është shtypur në fillim të boshtit, ndërsa i fundit - në fund:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Shembull . Vlera space-around

Blloqet shpërndahen përgjatë boshtit kryesor, ku midis bllokut të parë dhe fillimit të boshtit, bllokut të fundit dhe fundit të boshtit ka të njëjtën hapësirë, si dhe midis blloqeve të tjera. Megjithatë, hapësirat mblidhen dhe midis dy blloqeve distanca është dy herë më e madhe, se midis bllokut dhe fillimit/fundit të boshtit:

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

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Shembull . Vlera center. Boshti poshtë

Ndryshojmë drejtimin e boshtit kryesor, duke caktuar flex-direction me vlerën column:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Shembull . Vlera space-between. Boshti poshtë

Tani blloqet do të shpërndahen në mënyrë të barabartë përgjatë vertikales:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Shembull . Rreshtimi sipas fillimit të boshtit horizontal (rreshtave) në grid

Le të vendosim rreshtimin për elementet tona sipas fillimit të boshtit horizontal:

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

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

Shembull . Rreshtimi sipas qendrës së boshtit horizontal në grid

Tani le të vendosim rreshtimin për elementet tona sipas qendrës së boshtit horizontal:

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

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

Shembull . Rreshtimi sipas fundit të boshtit horizontal në grid

Le të vendosim rreshtimin për elementet tona sipas fundit të boshtit horizontal:

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

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

Shihni gjithashtu

vetija flex-direction,
e cila përcakton drejtimin e boshteve të blloqeve flex
vetija align-items,
e cila përcakton rreshtimin përgjatë boshtit kryq
vetija flex-wrap,
e cila përcakton shumë-rreshtshmërinë e blloqeve flex
vetija flex-flow,
shkurtim për flex-direction dhe flex-wrap
vetija order,
e cila përcakton renditjen e blloqeve flex
vetija align-self,
e cila përcakton rreshtimin e një blloku të vetëm
vetija flex-basis,
e cila përcakton madhësinë e një blloku specifik flex
vetija flex-grow,
e cila përcakton lakminë e blloqeve flex
vetija flex-shrink,
e cila përcakton tkurrshmërinë e blloqeve flex
vetija flex,
shkurtim për flex-grow, flex-shrink dhe flex-basis