Justify-content häsiýeti

justify-content häsiýeti flex bloklar üçin elementleri esasy ok boýunça, gridler üçin bolsa ýatay ok boýunça deňleşdirýär. Ene elemente ulanylýar.

Sintaksis

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

Görnüşleri

Görnüşi	Düşündirişi
`flex-start`	Bloklar esasy (ýatay) oküň başyna deňlenýär.
`flex-end`	Bloklar esasy (ýatay) oküň ahyryna deňlenýär.
`center`	Bloklar esasy (ýatay) oküň merkezinde durýar.
`space-between`	Bloklar esasy (ýatay) ok boýunça bölüşdirilýär, şonuň bilen birinji element oküň başyna, ahyryndaky bolsa oküň ahyryna deňlenýär.
`space-around`	Bloklar esasy (ýatay) ok boýunça bölüşdirilýär, şonuň bilen birinji blok bilen oküň başy, iň soňky blok bilen oküň ahyry arasyndaky boşluk, beýleki bloklar arasyndaky boşluk bilen deň. Emma, görünen ýaly deň däl: boşluklar jemlenýär we iki blok arasyndaky aralyk, blok bilen oküň başy/ahyry arasyndaky aralykdan iki esse uly.

Bellenen görnüşi: flex-start.

Mysal . Flex-start görnüşi

Häzir ok çepden saga ugrylýar (muny flex-direction: row ýerine ýetirýär), bloklar bolsa çep tarapa deňlenýär:

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

Mysal . Flex-end görnüşi

Bu mysalda ok hem çepden saga ugrylýar, ýöne bloklar sag tarapa deňlenýär, sebäbi justify-content görnüşi flex-end hökmünde bellenen:

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

Mysal . Center görnüşi

Häzir bloklar esasy oküň ugryndan garaşmazdan merkezde bolar:

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

Mysal . Space-between görnüşi

Bloklar esasy ok boýunça bölüşdirilýär, şonuň bilen birinji element oküň başyna deňlenýär, iň soňky bolsa oküň ahyryna:

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

Mysal . Space-around görnüşi

Bloklar esasy ok boýunça bölüşdirilýär, şonuň bilen birinji blok bilen oküň başy, iň soňky blok bilen oküň ahyry arasyndaky boşluk, beýleki bloklar arasyndaky boşluk bilen deň. Emma, boşluklar jemlenýär we iki blok arasyndaky aralyk iki esse uly, blok bilen oküň başy/ahyry arasyndaky aralykdan:

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

Mysal . Center görnüşi. Ok aşak

flex-direction häsiýetine column görnüşini berip, esasy oküň ugryny üýtgedeliň:

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

Mysal . Space-between görnüşi. Ok aşak

Häzir bloklar dik ýatyklykda deň bölüşdiriler:

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

Mysal . Ýatay oküň başy boýunça deňleşdirmek (hatarlar) gridde

Elementleri ýatay oküň başy boýunça deňleşdirýän birini guralyň:

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

Mysal . Ýatay oküň merkezi boýunça deňleşdirmek gridde

Emma indi elementleri ýatay oküň merkezi boýunça deňleşdirýän birini guralyň:

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

Mysal . Ýatay oküň ahyry boýunça deňleşdirmek gridde

Elementleri ýatay oküň ahyry boýunça deňleşdirýän birini guralyň:

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

Şeýle-de görüň

flex-direction häsiýeti,
flex bloklaryň oklarynyň ugryny kesgitleýär
align-items häsiýeti,
garaşsyz ok boýunça deňleşdirmäni kesgitleýär
flex-wrap häsiýeti,
flex bloklaryň köp setirliligini kesgitleýär
flex-flow häsiýeti,
flex-direction we flex-wrap üçin gysga görnüş
order häsiýeti,
flex bloklaryň tertibini kesgitleýär
align-self häsiýeti,
bir blokyň deňleşdirilmesini kesgitleýär
flex-basis häsiýeti,
belli bir flex blokunyň ölçegini kesgitleýär
flex-grow häsiýeti,
flex bloklaryň talancanlygyny kesgitleýär
flex-shrink häsiýeti,
flex bloklaryň ýumşaklygyny kesgitleýär
flex häsiýeti,
flex-grow, flex-shrink we flex-basis üçin gysga görnüş