Właściwość justify-content

Właściwość justify-content ustawia wyrównanie elementów wzdłuż głównej osi dla kontenerów flex oraz wzdłuż osi poziomej dla siatki CSS Grid. Stosuje się do elementu nadrzędnego.

Składnia

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

Wartości

Wartość	Opis
`flex-start`	Elementy dociśnięte do początku głównej (poziomej) osi.
`flex-end`	Elementy dociśnięte do końca głównej (poziomej) osi.
`center`	Elementy ustawione na środku głównej (poziomej) osi.
`space-between`	Elementy rozłożone wzdłuż głównej (poziomej) osi, przy czym pierwszy element dociśnięty jest do początku osi, a ostatni - do końca.
`space-around`	Elementy rozłożone wzdłuż głównej (poziomej) osi, przy czym między pierwszym elementem a początkiem osi, oraz ostatnim elementem a końcem osi, jest taka sama przerwa, jak między pozostałymi elementami. Jednakże, nie są one równe, jak mogłoby się wydawać: przerwy sumują się i między dwoma elementami odległość jest dwa razy większa, niż między elementem a początkiem/końcem osi.

Wartość domyślna: flex-start.

Przykład . Wartość flex-start

Oś skierowana jest od lewej do prawej (ustawia to flex-direction: row), a elementy dociśnięte są do lewej strony:

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

Przykład . Wartość flex-end

W tym przykładzie oś również skierowana jest od lewej do prawej, ale elementy dociśnięte są do prawej strony, ponieważ ustawiono justify-content na wartość 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;
}

Przykład . Wartość center

Elementy będą ustawione na środku, niezależnie od kierunku głównej osi:

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

Przykład . Wartość space-between

Elementy rozłożone są wzdłuż głównej osi, przy czym pierwszy element dociśnięty jest do początku osi, a ostatni - do końca:

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

Przykład . Wartość space-around

Elementy rozłożone są wzdłuż głównej osi, przy czym między pierwszym elementem a początkiem osi, ostatnim elementem a końcem osi jest taka sama przerwa, jak między pozostałymi elementami. Jednakże, przerwy sumują się i między dwoma elementami odległość jest dwa razy większa, niż między elementem a początkiem/końcem osi:

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

Przykład . Wartość center. Oś w dół

Zmieńmy kierunek głównej osi, ustawiając flex-direction na wartość 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;
}

Przykład . Wartość space-between. Oś w dół

Elementy rozłożą się równomiernie w pionie:

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

Przykład . Wyrównanie do początku osi poziomej (wierszy) w siatce Grid

Ustawmy wyrównanie naszych elementów do początku osi poziomej:

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

Przykład . Wyrównanie do środka osi poziomej w siatce Grid

A teraz ustawmy wyrównanie naszych elementów do środka osi poziomej:

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

Przykład . Wyrównanie do końca osi poziomej w siatce Grid

Ustawmy wyrównanie naszych elementów do końca osi poziomej:

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

Zobacz też

właściwość flex-direction,
która ustawia kierunek osi w kontenerach flex
właściwość align-items,
która ustawia wyrównanie wzdłuż osi poprzecznej
właściwość flex-wrap,
która ustawia zawijanie elementów w kontenerach flex
właściwość flex-flow,
skrót dla flex-direction i flex-wrap
właściwość order,
która ustawia kolejność elementów flex
właściwość align-self,
która ustawia wyrównanie pojedynczego elementu
właściwość flex-basis,
która ustawia bazowy rozmiar elementu flex
właściwość flex-grow,
która ustawia współczynnik rozszerzania elementów flex
właściwość flex-shrink,
która ustawia współczynnik kurczenia elementów flex
właściwość flex,
skrót dla flex-grow, flex-shrink i flex-basis