Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 88

Cuando un contenedor flexible tiene múltiples líneas, es posible que haga falta alinearlas. La propiedad align-content alinea las líneas dentro de un contenedor flexible y funciona como align-items pero para múltiples líneas.

Código 2-55

Alineación de varias líneas con la propiedad align-content.

Para poder alinear las líneas tiene que haber espacio libre disponible y por eso en el Código 2-55 añadimos la propiedad height para el contenedor. Cada caja se declara como flexible con un tamaño inicial y el elemento contenedor se define como un contenedor multilínea con la propiedad flex-wrap. Esto crea un contenedor flexible con dos líneas similares al ejemplo del Código 2-54, pero con un espacio vertical libre para jugar.

La propiedad align-content puede tomar seis valores: flex-start, flex-end, center, space-between, space-around y stretch. De nuevo el último valor es el aplicado de forma predeterminada y amplía las líneas para llenar el espacio disponible, salvo que sea declarado un tamaño fijo para los elementos.

Vamos a ver cómo funcionan los diferentes valores:

Figura 2-24

Alineación de líneas con align-content: flex-start.

Figura 2-25

Alineación de líneas con align-content: flex-end.

Figura 2-26

Alineación de líneas con align-content: center.

Figura 2-27

Alineación de líneas con align-content: space-between.

Figura 2-28

Alineación de líneas con align-content: space-around.

Figura 2-29

Alineación de líneas con align-content: stretch.

Hágalo usted mismo

Pruebe los diferentes valores disponibles para la propiedad align-content utilizando las reglas CSS del Código 2-55. Recuerde de nuevo agregar otras propiedades a los elementos, como fondo de color, altura, o un borde, para ver e identificar cada caja en la pantalla.

Importante

Para el momento de preparar este manual, el único navegador capaz de trabajar con el Modelo de caja flexible es Google Chrome y por tanto solo podrá probar estos ejemplos en este navegador y usando siempre el prefijo -webkit-(por ejemplo, -webkit-align-content: center;).

* Nota del traductor: En inglés se utiliza una analogía con un árbol familiar para referirse a los elementos anidados: De este modo podríamos decir que los elementos son hermanos (siblings) y que cada uno de ellos es hijo (child) de <div>.