Propiedad justify-content

La propiedad justify-content establece la alineación de los elementos a lo largo del eje principal para bloques flex y a lo largo del eje horizontal para grids. Se aplica al elemento padre.

Sintaxis

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

Valores

Valor	Descripción
`flex-start`	Los bloques están pegados al inicio del eje principal (horizontal).
`flex-end`	Los bloques están pegados al final del eje principal (horizontal).
`center`	Los bloques están centrados a lo largo del eje principal (horizontal).
`space-between`	Los bloques se distribuyen a lo largo del eje principal (horizontal), donde el primer elemento está pegado al inicio del eje, y el último - al final.
`space-around`	Los bloques se distribuyen a lo largo del eje principal (horizontal), donde entre el primer bloque y el inicio del eje, y entre el último bloque y el final del eje, hay un espacio igual al que hay entre el resto de los bloques. Sin embargo, no son iguales, como podría parecer: los espacios se suman y entre dos bloques la distancia es dos veces mayor que entre un bloque y el inicio/final del eje.

Valor por defecto: flex-start.

Ejemplo . Valor flex-start

Actualmente el eje está dirigido de izquierda a derecha (esto lo hace flex-direction: row), y los bloques están pegados al lado izquierdo:

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

Ejemplo . Valor flex-end

En este ejemplo el eje también está dirigido de izquierda a derecha, pero los bloques están pegados al lado derecho, ya que se estableció justify-content con el valor 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;
}

Ejemplo . Valor center

Ahora los bloques estarán centrados independientemente de la dirección del eje principal:

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

Ejemplo . Valor space-between

Los bloques se distribuyen a lo largo del eje principal, donde el primer elemento está pegado al inicio del eje, y el último - al final:

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

Ejemplo . Valor space-around

Los bloques se distribuyen a lo largo del eje principal, donde entre el primer bloque y el inicio del eje, y entre el último bloque y el final del eje, hay un espacio igual al que hay entre el resto de los bloques. Sin embargo, los espacios se suman y entre dos bloques la distancia es dos veces mayor que entre un bloque y el inicio/final del eje:

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

Ejemplo . Valor center. Eje hacia abajo

Cambiemos la dirección del eje principal, estableciendo flex-direction con el valor 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;
}

Ejemplo . Valor space-between. Eje hacia abajo

Ahora los bloques se distribuirán uniformemente a lo largo de la 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;
}

Ejemplo . Alineación al inicio del eje horizontal (filas) en grid

Vamos a establecer la alineación para nuestros elementos al inicio del eje horizontal:

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

Ejemplo . Alineación al centro del eje horizontal en grid

Y ahora vamos a establecer la alineación para nuestros elementos al centro del eje horizontal:

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

Ejemplo . Alineación al final del eje horizontal en grid

Vamos a establecer la alineación para nuestros elementos al final del eje horizontal:

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

Véase también

la propiedad flex-direction,
que establece la dirección de los ejes de los bloques flex
la propiedad align-items,
que establece la alineación a lo largo del eje transversal
la propiedad flex-wrap,
que establece la multilínea de los bloques flex
la propiedad flex-flow,
abreviatura para flex-direction y flex-wrap
la propiedad order,
que establece el orden de los bloques flex
la propiedad align-self,
que establece la alineación de un bloque individual
la propiedad flex-basis,
que establece el tamaño de un bloque flex específico
la propiedad flex-grow,
que establece la capacidad de expansión de los bloques flex
la propiedad flex-shrink,
que establece la capacidad de contracción de los bloques flex
la propiedad flex,
abreviatura para flex-grow, flex-shrink y flex-basis