align-content

Resumen

La propiedad CSS align-content ajusta las l√≠neas dentro de un contenedor flex cuando hay espacio extra en el eje transversal.

Esta propiedad no tiene efecto en cajas flexibles de una sola línea.

Valor inicialnormal
Applies tomulti-line flex containers
Heredableno
Valor calculadocomo se especifica
Animation typediscrete

Vea Usando las cajas flexibles CSS para m√°s propiedades e informaci√≥n.

Sintaxis

/* Ajusta las líneas desde el inicio del eje transversal */
align-content: flex-start;

/* Ajusta las líneas desde el final del eje transversal */
align-content: flex-end;

/* Ajusta las líneas al rededor del centro del eje transversal */
align-content: center;

/* Distribuye las líneas a lo largo del eje transversal, de principio a fin */
align-content: space-between;

/* Distribuye las líneas a lo largo del eje transversal, igualmente espaciados */
align-content: space-around;

/* Estira las líneas para que ocupen el eje transversal completo */
align-content: stretch;

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

Valores

flex-start
Las líneas son ajustadas a partir del inicio del eje transversal. El borde transversal de inicio de la primera línea y el del contenedor flexible quedan unidos. Cada línea siguiente es unida a su predecesora.
flex-end
Las l√≠neas son ajustadas a partir del final del eje transversal. El borde transversal final de la √ļltima l√≠nea y el del contenedor flexible quedan unidos. Cada l√≠nea que precede es unida a la l√≠nea siguiente.
center
Las l√≠neas son ajustadas hacia el centro del contenedor flexible. Las l√≠neas son unidas entre s√≠, y centradas dentro del contenedor. El espacio entre el borde transversal de inicio y la primera l√≠nea, y el que hay entre el borde transversal final y la √ļltima l√≠nea es el mismo.
space-between
Las l√≠neas son distribuidas de manera uniforme en el contenedor flexible. El espaciado se hace de modo que la separaci√≥n entre cualquier par de elementos adyacentes sea el mismo. Los bordes transversales de inicio y de fin del contenedor son unidos a los bordes de la primera y √ļltima l√≠nea, respectivamente.
space-around
Las l√≠neas son distribuidas uniformemente de modo que el espacio entre cualquier par de elementos adyacentes sea el mismo. El espacio vac√≠o antes de la primera l√≠nea y el espacio despu√©s de la √ļltima es igual a la mitad del espacio entre cualquier par de l√≠neas adyacentes.
stretch
Las líneas son estiradas para usar el espacio sobrante. El espacio libre en el contenedor es dividido por igual entre todas las líneas.

Sintaxis formal

normal | (en-US) <baseline-position> | (en-US) <content-distribution> | (en-US) <overflow-position>? (en-US) <content-position>

where
<baseline-position> = [ (en-US) first | (en-US) last ] (en-US)? (en-US) baseline
<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

HTML:

<div id="container">
  <p>align-content: flex-start</p>
  <div id="flex-start">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: center</p>
  <div id="center">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: flex-end</p>
  <div id="flex-end">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: space-between</p>
  <div id="space-between">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: space-around</p>
  <div id="space-around">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: stretch</p>
  <div id="stretch">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS:

#container > div {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 140px;
  height: 140px;
  background: linear-gradient(-45deg, #78ff8c, #b4ffc8);
}

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

#flex-start {
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

#center {
  -webkit-align-content: center;
  align-content: center;
}

#flex-end {
  -webkit-align-content: flex-end;
  align-content: flex-end;
}

#space-between {
  -webkit-align-content: space-between;
  align-content: space-between;
}

#space-around {
  -webkit-align-content: space-around;
  align-content: space-around;
}

#stretch {
  -webkit-align-content: stretch;
  align-content: stretch;
}

Su resultado es:

Especificaciones

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

Compatibilidad de 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 Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte b√°sico 21.0-webkit (en-US) 28.0[1] Sin soporte 12.10 Sin soporte
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte b√°sico ? ? 28.0[1] Sin soporte 12.10 Sin soporte

[1] Adem√°s del soporte sin prefijo, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) a√Īadi√≥ soporte a la versi√≥n con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) el valor predeterminado de esta preferencia es true.

Véase también