Proprietatea align-content

Proprietatea align-content stabilește alinierea elementelor de-a lungul axei transversale pentru containerele flex și pe axa verticală pentru grid-uri. Se aplică elementului părinte.

Sintaxă

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

Valori

Valoare	Descriere
`flex-start`	Blocurile sunt aliniate la începutul axei transversale (verticale).
`flex-end`	Blocurile sunt aliniate la sfârșitul axei transversale (verticale).
`center`	Blocurile sunt centrate pe axa transversală (verticală).
`space-between`	Blocurile sunt distribuite de-a lungul axei transversale (verticale), primul element este aliniat la începutul axei, iar ultimul - la sfârșit.
`space-around`	Blocurile sunt distribuite de-a lungul axei transversale (verticale), spațiul dintre primul bloc și începutul axei, și dintre ultimul bloc și sfârșitul axei este același ca și între celelalte blocuri. Cu toate acestea, ele nu sunt egale, așa cum s-ar putea părea: spațiile se adună și între două blocuri distanța este de două ori mai mare decât între bloc și începutul/sfârșitul axei.

Exemplu . Valoarea flex-start

În acest exemplu, axa de-a lungul căreia se face alinierea este orientată de sus în jos, adică este transversală. După cum se vede din rezultatul obținut, toate elementele noastre sunt aliniate la partea sa superioară:

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

Exemplu . Valoarea flex-end

În acest exemplu, blocurile sunt aliniate la partea inferioară a axei transversale, deoarece proprietatea align-content este setată la valoarea 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;
}

Exemplu . Valoarea center

Acum blocurile sunt aliniate pe centrul axei transversale:

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

Alinierea la începutul axei verticale în grid

Să setăm alinierea pentru elementele din grid la începutul axei verticale:

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

Alinierea pe centrul axei verticale în grid

Acum să setăm alinierea elementelor pe centrul axei verticale:

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

Alinierea la sfârșitul axei verticale în grid

Să setăm alinierea elementelor la sfârșitul axei verticale:

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

Vezi și

proprietatea flex-direction,
care stabilește direcția axelor containerelor flex
proprietatea justify-content,
care stabilește alinierea pe axa principală
proprietatea align-items,
care stabilește alinierea pe axa transversală
proprietatea flex-wrap,
care stabilește afișarea pe mai multe linii a containerelor flex
proprietatea flex-flow,
prescurtare pentru flex-direction și flex-wrap
proprietatea order,
care stabilește ordinea elementelor flex
proprietatea align-self,
care stabilește alinierea unui singur element
proprietatea place-content,
care stabilește alinierea pe axele principală și transversală