Proprietatea justify-content

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

Sintaxă

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

Valori

Valoare	Descriere
`flex-start`	Blocurile sunt aliniate la începutul axei principale (orizontale).
`flex-end`	Blocurile sunt aliniate la sfârșitul axei principale (orizontale).
`center`	Blocurile sunt centrate pe axa principală (orizontală).
`space-between`	Blocurile sunt distribuite uniform de-a lungul axei principale (orizontale), primul element este aliniat la începutul axei, iar ultimul - la sfârșit.
`space-around`	Blocurile sunt distribuite de-a lungul axei principale (orizontale), spațiul dintre primul bloc și începutul axei, 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 un bloc și începutul/sfârșitul axei.

Valoarea implicită: flex-start.

Exemplu . Valoarea flex-start

Acum axa este direcționată de la stânga la dreapta (aceasta este realizată de flex-direction: row), iar blocurile sunt aliniate la partea stângă:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemplu . Valoarea flex-end

În acest exemplu, axa este de asemenea direcționată de la stânga la dreapta, dar blocurile sunt aliniate la partea dreaptă, deoarece justify-content este setat la valoarea flex-end:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemplu . Valoarea center

Acum blocurile vor fi centrate indiferent de direcția axei principale:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemplu . Valoarea space-between

Blocurile sunt distribuite uniform de-a lungul axei principale, primul element este aliniat la începutul axei, iar ultimul - la sfârșit:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemplu . Valoarea space-around

Blocurile sunt distribuite de-a lungul axei principale, spațiul dintre primul bloc și începutul axei, ultimul bloc și sfârșitul axei este același ca și între celelalte blocuri. Cu toate acestea, spațiile se adună și între două blocuri distanța este de două ori mai mare decât între un bloc și începutul/sfârșitul axei:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemplu . Valoarea center. Axa în jos

Să schimbăm direcția axei principale, setând flex-direction la valoarea column:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemplu . Valoarea space-between. Axa în jos

Acum blocurile se vor distribui uniform pe verticală:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemplu . Alinierea la începutul axei orizontale (rânduri) în grid

Să setăm alinierea pentru elementele noastre la începutul axei orizontale:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}

Exemplu . Alinierea la centrul axei orizontale în grid

Acum să setăm alinierea pentru elementele noastre la centrul axei orizontale:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}

Exemplu . Alinierea la sfârșitul axei orizontale în grid

Să setăm alinierea pentru elementele noastre la sfârșitul axei orizontale:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 pentru containerele flex
proprietatea align-items,
care stabilește alinierea pe axa transversală
proprietatea flex-wrap,
care stabilește multi-linia pentru containerele 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 flex-basis,
care stabilește dimensiunea inițială a unui element flex
proprietatea flex-grow,
care stabilește factorul de creștere al elementelor flex
proprietatea flex-shrink,
care stabilește factorul de micșorare al elementelor flex
proprietatea flex,
prescurtare pentru flex-grow, flex-shrink și flex-basis