W3docs
es
Iniciar sesión

Propiedad CSS align-content

La propiedad align-content define cómo el navegador distribuye el espacio entre líneas. Ejemplos con los seis valores disponibles.

La propiedad CSS align-content controla cómo un contenedor flex distribuye el espacio extra entre y alrededor de sus líneas a lo largo del eje transversal. Esta página explica cuándo se aplica la propiedad, describe cada valor con un ejemplo ejecutable y muestra en qué se diferencia de las demás propiedades de alineación relacionadas.

En un contenedor flex con dirección de fila, el eje principal corre horizontalmente, por lo que el eje transversal es vertical. align-content mueve filas enteras de elementos hacia arriba, hacia abajo o las separa verticalmente — nunca afecta a los elementos de forma individual.

¿Cuándo tiene efecto align-content?

Deben cumplirse dos condiciones al mismo tiempo; de lo contrario, la propiedad no hace nada:

  • El contenedor debe permitir el ajuste de línea — establece flex-wrap: wrap (o usa el atajo flex-flow). El valor predeterminado nowrap mantiene todo en una sola línea.
  • Debe haber más de una línea, además de espacio libre en el eje transversal para que las líneas puedan moverse.

Si quieres alinear los elementos dentro de una sola línea, usa align-items en su lugar. align-content actúa sobre las líneas como grupo; align-items actúa sobre los elementos dentro de cada línea. La propiedad align-content es una de las propiedades de CSS3.

El valor predeterminado de esta propiedad es stretch.

La propiedad align-content acepta los siguientes valores:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
  • stretch
Valor inicialstretch
Se aplica aContenedores flex multilínea.
HeredadaNo.
AnimableNo.
VersiónCSS3
Sintaxis DOMobject.style.alignContent = "flex-end";

Sintaxis

Sintaxis de la propiedad CSS align-content

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | initial | inherit;

Ejemplo de la propiedad align-content con el valor stretch:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: stretch;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: stretch; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>
Pruébalo tú mismo »

Resultado

Propiedad CSS align-content con el valor stretch

Ejemplo de la propiedad align-content con el valor "center":

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: center;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: center; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad align-content con el valor "flex-start":

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: flex-start; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad align-content con el valor "flex-end":

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: flex-end;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: flex-end; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>
Pruébalo tú mismo »

En el siguiente ejemplo, el espacio se distribuye de forma uniforme entre las líneas flex.

Ejemplo de la propiedad align-content con el valor "space-between":

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: space-between;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: space-between; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>
Pruébalo tú mismo »

Resultado

Propiedad CSS align-content con el valor space-between

Otro ejemplo con el valor "space-around". Hay un espacio igual entre las líneas flex.

Ejemplo de la propiedad align-content con el valor "space-around":

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: space-around;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: space-around; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>
Pruébalo tú mismo »

Con space-evenly, los espacios antes de la primera línea, entre cada línea y después de la última son todos idénticos — a diferencia de space-around, donde los espacios exteriores son la mitad del tamaño de los interiores.

Ejemplo de la propiedad align-content con el valor "space-evenly":

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: space-evenly;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: space-evenly; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

align-content vs. align-items vs. justify-content

Estas tres propiedades se confunden fácilmente porque todas alinean hijos flex:

  • align-content — alinea las líneas como grupo en el eje transversal. Requiere ajuste de línea y múltiples líneas.
  • align-items — alinea los elementos dentro de una sola línea en el eje transversal. Funciona incluso con una sola línea.
  • justify-content — alinea los elementos a lo largo del eje principal (la dirección en la que fluyen los elementos).

Para un recorrido más detallado sobre cómo encajan estas propiedades, consulta The Ultimate Guide to Flexbox.

Compatibilidad con navegadores

align-content es compatible con todos los navegadores modernos — Chrome, Firefox, Safari, Edge y Opera. Es parte de la especificación estable de Flexbox, por lo que no se necesitan prefijos de proveedor en las versiones actuales.

Valores

ValorDescripciónPruébalo
stretchEstira los elementos para que ocupen el contenedor. Es el valor predeterminado de esta propiedad.Pruébalo »
centerLos elementos se colocan en el centro del contenedor.Pruébalo »
flex-startLos elementos se colocan al inicio del contenedor.Pruébalo »
flex-endLos elementos se colocan al final del contenedor.Pruébalo »
space-betweenDistribuye el espacio de forma uniforme entre las líneas flex.Pruébalo »
space-aroundLos elementos se distribuyen con espacio igual entre ellos.Pruébalo »
space-evenlyDistribuye los elementos con espacio igual entre ellos, así como antes del primero y después del último.Pruébalo »
initialHace que la propiedad use su valor predeterminado.Pruébalo »
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica
¿Cuáles son los valores posibles para la propiedad CSS align-content?
¿Cuáles son los valores posibles para la propiedad CSS align-content?
Was this page helpful?