align-content қасиеті

align-content қасиеті элементтерді flex блоктар үшін көлденең ось бойынша, ал grid үшін тік ось бойынша туралауды белгілейді. Аталық элементке қолданылады.

Синтаксис

селектор {
	align-content: flex-start | flex-end | center | space-between | space-around;
}

Мәндері

Мәні	Сипаттамасы
`flex-start`	Блоктар көлденең (тік) осьтің басына тығызып қойылған.
`flex-end`	Блоктар көлденең (тік) осьтің соңына тығызып қойылған.
`center`	Блоктар көлденең (тік) осьтің ортасында орналасқан.
`space-between`	Блоктар көлденең (тік) ось бойынша бөлінген, бұл ретте бірінші элемент осьтің басына, ал соңғысы - соңына тығызып қойылған.
`space-around`	Блоктар көлденең (тік) ось бойынша бөлінген, бұл ретте бірінші блок пен осьтің басы арасындағы, соңғы блок пен осьтің соңы арасындағы арақашықтық қалған блоктар арасындағы арақашықтықпен бірдей. Алайда, олар бірдей емес, көрінгендей емес: арақашықтықтар қосылады және екі блок арасындағы қашықтық блок пен осьтің басы/соңы арасындағы қашықтықтан екі есе үлкен.

Мысал . flex-start мәні

Бұл мысалда туралау жүретін ось жоғарыдан төменге қарай бағытталған, яғни ол көлденең ось болып табылады. Алынған нәтижеден көрініп тұрғандай, біздің барлық элементтер оның жоғарғы бөлігіне тығызып қойылған:

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

Мысал . flex-end мәні

Бұл мысалда блоктар көлденең осьтің төменгі жағына тығызып қойылған, себебі align-content қасиеті flex-end мәніне орнатылған:

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

Мысал . center мәні

Қазір блоктар көлденең осьтің ортасына тураланған:

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

Grid ішінде тік осьтің басы бойынша туралау

Grid ішіндегі элементтерді тік осьтің басы бойынша туралайық:

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

Grid ішінде тік осьтің ортасы бойынша туралау

Енді элементтерді тік осьтің ортасы бойынша туралайық:

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

Grid ішінде тік осьтің соңы бойынша туралау

Элементтерді тік осьтің соңы бойынша туралайық:

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

Сондай-ақ қараңыз

flex-direction қасиеті,
ол flex блоктар осьтерінің бағытын белгілейді
justify-content қасиеті,
ол негізгі ось бойынша туралауды белгілейді
align-items қасиеті,
ол көлденең ось бойынша туралауды белгілейді
flex-wrap қасиеті,
ол flex блоктардың көпжолдылығын белгілейді
flex-flow қасиеті,
flex-direction және flex-wrap үшін қысқарту
order қасиеті,
ол flex блоктардың ретін белгілейді
align-self қасиеті,
ол бір блоктың туралауын белгілейді
place-content қасиеті,
ол негізгі және көлденең осьтер бойынша туралауды белгілейді