Sifa justify-content

Sifa justify-content inabainisha mpangilio wa vipengele kwenye mhimili mkuu kwa masanduku ya flex na kwenye mhimili mlalo kwa gridi. Inatumika kwa kipengele cha mzazi.

Syntax

kichagua {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Thamani

Thamani	Maelezo
`flex-start`	Masandaku yamebanikwa kwenye mwanzo wa mhimili mkuu (mlalo).
`flex-end`	Masandaku yamebanikwa kwenye mwisho wa mhimili mkuu (mlalo).
`center`	Masandaku yamekoma katikati ya mhimili mkuu (mlalo).
`space-between`	Masandaku yamesambazwa kwenye mhimili mkuu (mlalo), ambapo kipengele cha kwanza kimebanikwa kwenye mwanzo wa mhimili, na cha mwisho - kwenye mwisho.
`space-around`	Masandaku yamesambazwa kwenye mhimili mkuu (mlalo), ambapo kati ya sanduku la kwanza na mwanzo wa mhimili, sanduku la mwisho na mwisho wa mhimili kuna nafasi sawa, kama kati ya masandaku mengine. Hata hivyo, hazilingani, kama inavyoweza kuonekana: nafasi huongezwa na kati ya masandaku mawili umbali ni mara mbili kubwa kuliko kati ya sanduku na mwanzo/mwisho wa mhimili.

Thamani chaguomsingi: flex-start.

Mfano . Thamani flex-start

Kwa sasa mhimili unaelekea kutoka kushoto kwenda kulia (hii inafanywa na flex-direction: row), na masandaku yamebanikwa kwenye upande wa kushoto:

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

Mfano . Thamani flex-end

Katika mfano huu mhimili pia unaelekea kutoka kushoto kulia, lakini masandaku yamebanikwa kwenye upande wa kulia, kwa sababu justify-content imewekwa kwa thamani 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;
}

Mfano . Thamani center

Kwa sasa masandaku yatakaa katikati bila kujali mwelekeo wa mhimili mkuu:

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

Mfano . Thamani space-between

Masandaku yamesambazwa kwenye mhimili mkuu, ambapo kipengele cha kwanza kimebanikwa kwenye mwanzo wa mhimili, na cha mwisho - kwenye mwisho:

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

Mfano . Thamani space-around

Masandaku yamesambazwa kwenye mhimili mkuu, ambapo kati ya sanduku la kwanza na mwanzo wa mhimili, la mwisho na mwisho wa mhimili kuna nafasi sawa, kama kati ya masandaku mengine. Hata hivyo, nafasi hujumlishwa na kati ya masandaku mawili umbali ni mara mbili kubwa kuliko kati ya sanduku na mwanzo/mwisho wa mhimili:

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

Mfano . Thamani center. Mhimili unaelekea chini

Wacha tubadilishe mwelekeo wa mhimili mkuu, tukiweka flex-direction kwa thamani 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;
}

Mfano . Thamani space-between. Mhimili unaelekea chini

Kwa sasa masandaku yatasambaa kwa usawa kwenye wima:

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

Mfano . Kupangisha kwenye mwanzo wa mhimili mlalo (safu) kwenye gridi

Wacha tuweke mpangilio kwa vipengele vyetu kwenye mwanzo wa mhimili mlalo:

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

Mfano . Kupangisha katikati ya mhimili mlalo kwenye gridi

Sasa tuweke mpangilio kwa vipengele vyetu katikati ya mhimili mlalo:

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

Mfano . Kupangisha kwenye mwisho wa mhimili mlalo kwenye gridi

Wacha tuweke mpangilio kwa vipengele vyetu kwenye mwisho wa mhimili mlalo:

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

Angalia pia

sifa flex-direction,
inayobainisha mwelekeo wa mihimili ya masanduku ya flex
sifa align-items,
inayobainisha mpangilio kwenye mhimili wa pili
sifa flex-wrap,
inayobainisha mistari mingi ya masanduku ya flex
sifa flex-flow,
ufupisho wa flex-direction na flex-wrap
sifa order,
inayobainisha mpangilio wa masanduku ya flex
sifa align-self,
inayobainisha mpangilio wa sanduku moja
sifa flex-basis,
inayobainisha ukubwa wa sanduku maalum la flex
sifa flex-grow,
inayobainisha ukubwa wa kukua kwa masanduku ya flex
sifa flex-shrink,
inayobainisha uwezo wa kujikunja kwa masanduku ya flex
sifa flex,
ufupisho wa flex-grow, flex-shrink na flex-basis