Свойство align-content

Свойство align-content флекс-блоклар учун кўндаланг ўқ бўйича, гридлар учун эса тик ўқ бўйича элементларни тегишни белгилайди. Ота-она элементга қўлланилади.

Синтаксис

селектор {
	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;
}

Гридда тик ўқнинг боши бўйича тегиш

Келинг, гриддаги элементларимиз учун тик ўқнинг боши бўйича тегишни ўрнатамиз:

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

Гридда тик ўқнинг маркази бўйича тегиш

Энди эса элементларни тик ўқнинг маркази бўйича тегишни ўрнатамиз:

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

Гридда тик ўқнинг охири бўйича тегиш

Келинг, элементларни тик ўқнинг охири бўйича тегишни ўрнатамиз:

<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,
флекс-блокларнинг ўқлари йўналишини белгиловчи
свойство justify-content,
асосий ўқ бўйича тегишни белгиловчи
свойство align-items,
кўндаланг ўқ бўйича тегишни белгиловчи
свойство flex-wrap,
флекс-блокларнинг кўп қatorлигини белгиловчи
свойство flex-flow,
flex-direction ва flex-wrap учун қисқартма
свойство order,
флекс-блокларнинг тартибини белгиловчи
свойство align-self,
бир блокни тегишни белгиловчи
свойство place-content,
асосий ва кўндаланг ўқлар бўйича тегишни белгиловчи