justify-content

Ejemplos

Inicio

Usa la utilidad justify-start para justificar los elementos contra el inicio del eje principal del contenedor:

<div class="flex justify-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Centro

Usa las utilidades justify-center o justify-center-safe para justificar los elementos a lo largo del centro del eje principal del contenedor:

<div class="flex justify-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

<div class="flex justify-center-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Cuando no hay suficiente espacio disponible, la utilidad justify-center-safe alineará los elementos al inicio del contenedor en lugar del centro.

Fin

Usa las utilidades justify-end o justify-end-safe para justificar los elementos contra el final del eje principal del contenedor:

<div class="flex justify-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>03</div>
</div>

<div class="flex justify-end-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>03</div>
</div>

Cuando no hay suficiente espacio disponible, la utilidad justify-end-safe alineará los elementos al inicio del contenedor en lugar del final.

Space between

Usa la utilidad justify-between para justificar los elementos a lo largo del eje principal del contenedor de manera que haya una cantidad igual de espacio entre cada elemento:

<div class="flex justify-between ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Space around

Usa la utilidad justify-around para justificar los elementos a lo largo del eje principal del contenedor de manera que haya una cantidad igual de espacio en cada lado de cada elemento:

<div class="flex justify-around ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Space evenly

Usa la utilidad justify-evenly para justificar los elementos a lo largo del eje principal del contenedor de manera que haya una cantidad igual de espacio alrededor de cada elemento, pero también teniendo en cuenta la duplicación de espacio que normalmente verías entre cada elemento al usar justify-around:

<div class="flex justify-evenly ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Stretch

Usa la utilidad justify-stretch para permitir que los elementos de contenido llenen el espacio disponible a lo largo del eje principal del contenedor:

<div class="flex justify-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Normal

Usa la utilidad justify-normal para empaquetar los elementos de contenido en su posición predeterminada como si no se hubiera establecido ningún valor de justify-content:

<div class="flex justify-normal ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Responsive design

Prefija una utilidad justify-content con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="flex justify-start md:justify-between ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.