justify-content

Resumen

La propiedad CSS justify-content define c√≥mo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor.

El alineamiento se produce luego de que las longitudes y m√°rgenes autom√°ticos son aplicados, lo que significa que, si existe al menos un elemento flexible con flex-grow diferente a 0, no tendr√° efecto ya que no habr√° espacio disponible.

No se debe asumir que esta propiedad s√≥lo se aplicar√° a contenedores flex en el futuro y por lo tanto no ocultarla simplemente estableciendo otro valor para display. El CSSWG est√° trabajano para extender su uso a cualquier elemento en bloque. La especificaci√≥n preliminar se encuentra en una etapa muy temprana y a√ļn no est√° implementada.

Valor inicialnormal
Applies toflex containers
Heredableno
Valor calculadocomo se especifica
Animation typediscrete

Véase Using CSS flexible boxes (en-US) para más propiedades e información.

Sintaxis

/* Alinear items flex desde el comienzo */
justify-content: flex-start;

/* Alinear items desde el final */
justify-content: flex-end;

/* Alinear items en el centro */
justify-content: center;

/* Distribuir items uniformemente
El primer item al inicio, el √ļltimo al final */
justify-content: space-between;

/* Distribuir items uniformemente
Los items tienen el mismo espacio a su alrededor */
justify-content: space-around;

/* Valores globales */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

Valores

flex-start
Los items flex se colocan comenzando desde el comienzo principal. El margen del primer item es alineado al ras con el borde del comienzo principal de la línea y cada item siguiente es alineado al ras con el precedente.
flex-end
Los items flex se colocan comenzando desde el final principal. El margen del √ļltimo item es alineado al ras con el borde del final principal de la l√≠nea y cada item precedente es alineado al ras con el siguiente.
center
Los items flex son colocados hacia el centro de la l√≠nea. Los items flex se alinean al ras entre s√≠ y en torno al centro de la l√≠nea. El espacio entre el borde del comienzo principal de la l√≠nea y el primer item es el mismo que el espacio entre el borde del final principal y el √ļltimo item de la l√≠nea.
space-between
Los items flex se distribuyen uniformemente sobre la l√≠nea. El espaciamiento se hace de tal manera que el espacio adyacente entre dos items es el mismo. El borde del comienzo principal y el borde del final principal se alinean al ras con el borde del primer y √ļltimo item respectivamente.
space-around
Los items flex se alinean uniformemente de tal manera que el espacio entre dos items adyacentes es el mismo. El espacio vac√≠o anterior al primer item y posterior al √ļltimo item equivale a la mitad del espacio entre dos items adyacentes.

Sintaxis formal

normal | (en-US) <content-distribution> | (en-US) <overflow-position>? (en-US) [ (en-US) <content-position> | (en-US) left | (en-US) right ] (en-US)

where
<content-distribution> = space-between | (en-US) space-around | (en-US) space-evenly | (en-US) stretch
<overflow-position> = unsafe | (en-US) safe
<content-position> = center | (en-US) start | (en-US) end | (en-US) flex-start | (en-US) flex-end

Ejemplos

Contenido HTML

<div id="container">
  <p>justify-content: flex-start</p>
  <div id="flex-start">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: flex-end</p>
  <div id="flex-end">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: center</p>
  <div id="center">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: space-between</p>
  <div id="space-between">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: space-around</p>
  <div id="space-around">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS

#container > div {
  display: flex;
  font-family: "Courier New", "Lucida Console", monospace;
}

#container > div > div {
  width: 50px;
  height: 50px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

#flex-start {
  justify-content: flex-start;
}

#center {
  justify-content: center;
}

#flex-end {
  justify-content: flex-end;
}

#space-between {
  justify-content: space-between;
}

#space-around {
  justify-content: space-around;
}

Resultados en:

Especificaciones

Especificación Estado Comentario
CSS Flexible Box Layout Module
La definición de 'justify-content' en esta especificación.
Candidate Recommendation Definición inicial

Compatibilidad en navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
Característica Firefox (Gecko) Chrome Internet Explorer Opera Safari
Soprte b√°sico 18.0 (18.0) (behind a pref) [1]
20.0 (20.0)
21.0-webkit (en-US) 11 12.10 Sin soporte
Característica Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Soprte b√°sico ? ? Sin soporte 12.10 Sin soporte

[1] Firefox soporta s√≥lo single-line flexbox hasta Firefox 28. Para activar soporte flexbox, para Firefox 18 y 19, el usuario debe cambiar la preferencia  about:config "layout.css.flexbox.enabled" a true.

Ver también