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
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden √ļnico no-ambig√ľo definido por la gram√°tica formal

Véase Using CSS flexible boxes 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 | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

where
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | 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!
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 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