Características align-content en CSS

Características align-content en CSS

La propiedad align-content en CSS define la forma en que el navegador distribuye el espacio entre y alrededor de los elementos a lo largo del eje secundario del contenedor flexible.

Funciones align-content css

Valor inicialstretch
Aplicado aContenedores flexibles en los que los artículos se muestran en más de una línea.
HeredableNo
MóvilNo
Valor calculadoComo se especificó.
/* alineación espacial */ 
align-content: center;
align-content: start;
align-content: end;
align-content: flex-start;
align-content: flex-end;
align-content: left;
align-content: right;
/* alineación de línea de base */ 
align-content: baseline;
align-content: first baseline;
align-content: last baseline;
/* distribución de espacio */ 
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: stretch;
/* controlar el desbordamiento del contenido */ 
align-content: safe center;
align-content: unsafe center;
/* valores globales */ 
align-content: inherit;
align-content: initial;
align-content: unset;

Esta propiedad no tiene ningún efecto en los contenedores flexibles donde los elementos se muestran en una sola línea.

Ejemplos y aplicaciones en código

Un ejemplo del uso de todos los valores que son compatibles con la mayoría de los navegadores hoy en día, observe cómo los elementos y los espacios en blanco que quedan a su alrededor se distribuyen cuando se usan valores diferentes:

<code> align-content: flex-start; </code>
<div class="container flex-start">
  <div id="item1"> 1 </div>
  <div id="item2"> 2 </div>
  <div id="item3"> 3 </div>
  <div id="item4"> 4 </div>
  <div id="item5"> 5 </div>
  <div id="item6"> 6 </div>
</div>
<br>
<code> align-content: flex-end; </code>
<div class="container flex-end">
  <div id="item1"> 1 </div>
  <div id="item2"> 2 </div>
  <div id="item3"> 3 </div>
  <div id="item4"> 4 </div>
  <div id="item5"> 5 </div>
  <div id="item6"> 6 </div>
</div>
<br>
<code>align-content: center; </code>
<div class="container center">
  <div id="item1"> 1 </div>
  <div id="item2"> 2 </div>
  <div id="item3"> 3 </div>
  <div id="item4"> 4 </div>
  <div id="item5"> 5 </div>
  <div id="item6"> 6 </div>
</div>
<br>
<code>align-content: space-between; </code>
<div class="container space-between">
  <div id="item1"> 1 </div>
  <div id="item2"> 2 </div>
  <div id="item3"> 3 </div>
  <div id="item4"> 4 </div>
  <div id="item5"> 5 </div>
  <div id="item6"> 6 </div>
</div>
<br>
<code>align-content: space-around; </code>
<div class="container space-around">
  <div id="item1"> 1 </div>
  <div id="item2"> 2 </div>
  <div id="item3"> 3 </div>
  <div id="item4"> 4 </div>
  <div id="item5"> 5 </div>
  <div id="item6"> 6 </div>
</div>
<br>
<code>align-content: stretch; </code>
<div class="container stretch">
  <div id="item1"> 1 </div>
  <div id="item2"> 2 </div>
  <div id="item3"> 3 </div>
  <div id="item4"> 4 </div>
  <div id="item5"> 5 </div>
  <div id="item6"> 6 </div>
</div>

Código CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  height:200px;
  width: 240px;
  background-color: #8c8c8c;
}
.flex-start { align-content: flex-start; }
.flex-end { align-content: flex-end; }
.center { align-content: center; }
.space-between { align-content: space-between; }
.space-around { align-content: space-around; }
.stretch { align-content: stretch; }
div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}
#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}
#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}
#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}
#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}
#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

Soporte de navegadores

CaracterísticaChromeFirefoxIEÓperaSafari
Soporte básico29,020,01112,59.0
Espacio uniformeNo soportado52,0No soportadoNo soportadoNo soportado
Empezar y terminarNo soportadosoportadoNo soportadoNo soportado?
Izquierda y derechaNo soportado52,0No soportadoNo soportado?
Base57,0soportadoNo soportado44,0?
Primera línea de base y última línea de baseNo soportado52,0No soportadoNo soportado?
Estirarse57,052,0No soportado44,0?

Las versiones anteriores de algunos navegadores (por ejemplo, Chrome, IE, Safari) admitían flexbox pero con el uso de una versión anterior ( -webkit--ms-).

Características generales

La propiedad acepta los align-content siguientes valores, tenga en cuenta que solo hemos explicado los valores no admitidos en algunos navegadores porque no funciona.

flex-start

Los objetos se alinearán uno al lado del otro comenzando desde el principio del eje secundario del contenedor flexible (es decir, desde la parte superior del elemento en la mayoría de los casos).

flex-end

Los objetos se alinearán uno al lado del otro comenzando desde el final del eje secundario del contenedor flexible (es decir, desde la parte inferior del elemento en la mayoría de los casos).

center

Los objetos se alinearán uno al lado del otro comenzando en el centro del eje secundario del contenedor flexible.

space-between

Los elementos se distribuirán en el eje secundario del contenedor flexible, el espaciado entre cada dos elementos sucesivos será constante, el primer elemento se alineará con el borde inicial y el último se alineará con el borde final.

space-around

Los elementos se distribuirán en el eje secundario del contenedor flexible, la separación entre cada dos elementos sucesivos será constante y el espacio vacío antes del primer elemento y después del último será la mitad del espacio entre dos elementos sucesivos.

stretch

Si las dimensiones de los artículos dentro del contenedor en el eje secundario son menores que las dimensiones del contenedor, entonces las dimensiones de los artículos aumentarán igualmente pero respetando las restricciones impuestas por propiedades max-heightmax-width(o similares), por lo que las dimensiones de los artículos dentro el contenedor será igual a la dimensión del contenedor en el eje secundario.

Estructura align-content css

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

Consulte también

  • La página de subpropiedades establecida por la propiedad align:  align-itemsalign-self.
  • Página de propiedades  position que describe cómo se debe colocar el elemento en el documento.
  • La página de cada una de las propiedades  widthheight que se encarga de configurar las dimensiones del elemento.