Svojstvo align-content

Svojstvo align-content zadaje poravnanje elemenata duž poprečne ose za flex blokove i po vertikalnoj osi za gridove. Primenjuje se na roditeljski element.

Sintaksa

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

Vrednosti

Vrednost	Opis
`flex-start`	Blokovi su pripijeni uz početak poprečne (vertikalne) ose.
`flex-end`	Blokovi su pripijeni uz kraj poprečne (vertikalne) ose.
`center`	Blokovi stoje u centru poprečne (vertikalne) ose.
`space-between`	Blokovi su raspoređeni duž poprečne (vertikalne) ose, pri čemu je prvi element pripijen uz početak ose, a poslednji - uz kraj.
`space-around`	Blokovi su raspoređeni duž poprečne (vertikalne) ose, pri čemu između prvog bloka i početka ose, poslednjeg bloka i kraja ose postoji isti razmak, kao i između ostalih blokova. Međutim, oni nisu jednaki, kao što bi se moglo činiti: razmaci se sabiraju i između dva bloka rastojanje je dva puta veće nego između bloka i početka/kraja ose.

Primer . Vrednost flex-start

U ovom primeru osa, po kojoj se vrši poravnanje usmerena je odozgo nadole, tj. ona je poprečna. Kao što se vidi iz dobijenog rezultata, svi naši elementi su pripijeni uz njen gornji deo:

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

Primer . Vrednost flex-end

U ovom primeru blokovi su pripijeni uz donju stranu poprečne ose, jer je svojstvo align-content zadato u vrednosti 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;
}

Primer . Vrednost center

Sada su blokovi poravnati u centru poprečne ose:

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

Poravnanje po početku vertikalne ose u gridu

Hajde da postavimo poravnanje za naše elemente u gridu po početku vertikalne ose:

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

Poravnanje po centru vertikalne ose u gridu

A sada hajde da postavimo poravnanje elemenata po centru vertikalne ose:

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

Poravnanje po kraju vertikalne ose u gridu

Hajde da postavimo poravnanje elemenata po kraju vertikalne ose:

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

Pogledajte takođe

svojstvo flex-direction,
koje zadaje smer osa flex blokova
svojstvo justify-content,
koje zadaje poravnanje po glavnoj osi
svojstvo align-items,
koje zadaje poravnanje po poprečnoj osi
svojstvo flex-wrap,
koje zadaje višelinijskost flex blokova
svojstvo flex-flow,
skraćenica za flex-direction i flex-wrap
svojstvo order,
koje zadaje redosled flex blokova
svojstvo align-self,
koje zadaje poravnanje jednog bloka
svojstvo place-content,
koje zadaje poravnanje po glavnoj i poprečnoj osi