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-55añ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
.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «ЛитРес».
Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.