Align-content aýratynlygy

align-content aýratynlygy elementleri flex bloklar üçin enine oke boýunça we gridler üçin dik oke boýunça deňleşdirýär. Ene elementine degişlidir.

Sintaksis

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

Görnüşleri

Görnüş	Düşündiriş
`flex-start`	Bloklar enine (dik) oküň başyna basylyp goýulýar.
`flex-end`	Bloklar enine (dik) oküň ahyryna basylyp goýulýar.
`center`	Bloklar enine (dik) oküň merkezinde ýerleşýär.
`space-between`	Bloklar enine (dik) oke boýunça bölünýär, ýöne birinji element okuň başyna, ahyryndaky bolsa ahyryna basylyp goýulýar.
`space-around`	Bloklar enine (dik) oke boýunça bölünýär, ýöne birinji blok bilen okuň başy, ahyryndaky blok bilen okuň ahyry arasyndaky aralyk, galan bloklar arasyndaky aralyk bilen deňdir. Emma, olaryň deň boljakdygy ýaly däl: aralyklar jemlenýär we iki blok arasynda blok bilen okuň başy/ahyry arasyndakydan iki esse köp bolýar.

Mysal . flex-start görnüşi

Bu mysalda deňleşdirilýän ok ýokardan aşak tarap ugrulýar, ýagny enine ok bolýar. Görşüňiz ýaly, ähli elementlerimiz onyň ýokarky bölegine basylyp goýulýar:

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

Mysal . flex-end görnüşi

Bu mysalda bloklar enine oküň aşaky tarapyna basylyp goýulýar, sebäbi align-content aýratynlygy flex-end görnüşinde bellendi:

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

Mysal . center görnüşi

Häzir bloklar enine oküň merkezi boýunça deňleşdirilýär:

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

Gridde dik oküň başy boýunça deňleşdirme

Geliň gridimizdäki elementlerimizi dik oküň başy boýunça deňleşdireliň:

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

Gridde dik oküň merkezi boýunça deňleşdirme

Indi bolsa elementleri dik oküň merkezi boýunça deňleşdireliň:

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

Gridde dik oküň ahyry boýunça deňleşdirme

Geliň elementleri dik oküň ahyry boýunça deňleşdireliň:

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

Şeýle-de serediň

flex-direction aýratynlygy,
ýagny flex bloklaryň oklarynyň ugruny kesgitleýän
justify-content aýratynlygy,
ýagny esasy ok boýunça deňleşdirilýän
align-items aýratynlygy,
ýagny enine ok boýunça deňleşdirilýän
flex-wrap aýratynlygy,
ýagny flex bloklaryň köp setirliligini kesgitleýän
flex-flow aýratynlygy,
flex-direction we flex-wrap üçin gysgaça görnüş
order aýratynlygy,
ýagny flex bloklaryň tertibini kesgitleýän
align-self aýratynlygy,
ýagny bir blokyň deňleşdirilmegini kesgitleýän
place-content aýratynlygy,
ýagny esasy we enine oklary boýunça deňleşdirilýän