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

Otra propiedad que nos ayudará a distribuir el espacio es align-items. Esta propiedad funciona como justify-content pero alinea las cajas en el eje transversal, por tanto es adecuada para la alineación vertical, poco habitual debido a que el uso de las tablets ha sido menospreciado.

Código 2-52

Distribuir el espacio vertical.

En el Código 2-52 ofrecemos una altura específica para cada caja, incluyendo el contenedor, y queda un espacio libre de 100 px que será establecido de acuerdo con el valor de la propiedad align-items.

Figura 2-16

La alineación vertical con align-items: center.

La propiedad align-items admite los siguientes valores: flex-start, flex-end, center, baseline y stretch. El último valor estira las cajas de arriba a abajo para ajustar los elementos hijos al espacio disponible y es una característica tan importante que es el valor establecido de forma predeterminada al crear un recipiente flexible. El stretch establece que si la altura de los elementos hijos no es declarada, éstos adoptan automáticamente la altura de su contendor.

Figura 2-17

Elementos anidados estirados con align-items: stretch.

Esta propiedad es extremadamente útil cuando el diseño tiene columnas con diferentes cantidades de contenido, que de otro modo harían que unos elementos fueran más cortos que los otros. Usando el valor stretch para la propiedad align-items, el tamaño de las columnas más cortas coincidirá con el tamaño de la más larga.

Por otra parte, el valor flex-start alinea las cajas en el inicio de la línea, que como recordará está determinado por la orientación del contenedor (por lo general a la izquierda o arriba):

Figura 2-18

Alineación de las cajas con align-items: flex-start.

El valor flex-end alinea las cajas al final del contenedor (normalmente abajo o a la derecha):

Figura 2-19

Alineación de elementos hijos con align-items: flex-end.

Por último, el valor baseline alinea las cajas desde base de la primera línea de contenido:

Figura 2-20

Alineación de elementos hijos con align-items: baseline.

Hágalo usted mismo

Utilice las reglas CSS del Código 2-52 y pruebe diferentes valores para la propiedad align-item. Borre la propiedad height para cada elemento e introduzca algún contenido para caja1. Use el valor de stretch para la propiedad align-items (o no declarare esta propiedad) para ver cómo el resto de los cuadros se amplían para que su altura coincida con la altura de caja1. También puede declarar la propiedad font-size: 50px para el elemento caja2 como se muestra en la Figura 2-20, para probar cómo el valor baseline alinea las cajas desde la base de la primera línea de contenido.