¿Qué es flexbox?
Flexbox es una funcionalidad de CSS3 para optimizar el diseño adaptativo o “Responsive Design”. Esto supone una mejora considerable respecto a la maquetación en bloque (como hace bootstrap 3), ya que no utiliza la propiedad “float” de css para la adaptación de contenido y evita que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.
Flexbox en Angular Material
Para facilitar el uso de flexbox aún más y evitar tener que configurar la plantilla desde el css, nos proporciona un API para separar la maquetación de la plantilla, del estilo asignado a las clases css.
La API de atributos HTML que nos proporciona es la siguiente:
La API dispone de unos puntos de ruptura preestablecidos para la anchura de la pantalla (width):
xs (<600px)
sm ([600px, 959px])
md ([960px, 1279px])
lg ([1280px, 1919px])
xl (>=1920px)
Estos alias se pueden asociar como sufijos en los atributos de la API. Así por ejemplo tendríamos que layout-xs=”row” o flex-xs solo aplicará cuando la anchura de la pantalla sea menor de 600px.
A su vez, estos sufijos se pueden combinar con otro sufijo más, “gt” (greater than), de la siguiente forma:
gt-xs(>=600px)
gt-sm(>=960px)
gt-md(>=1280px)
gt-lg(>=1920px)
En flexbox siempre tendremos un contenedor padre y sus hijos. Y tenemos 2 ejes, el de la dirección del layout y el perpendicular a la dirección del layout.
Así pues, indicando layout=”row”, le indicamos que ese div es contendor padre, y que la dirección del eje del layout es “row” (los elementos hijos se apilan en fila de izquierda a derecha).
[html] <div layout=”row”><div flex></div>
<div flex></div>
</div>
[/html]
Al indicar que los elementos hijos tienen el atributo flex, los elementos hijos se expandiran ocupando todo el ancho del contenedor padre a partes iguales. También podemos indicar el porcentaje para que indiquen cuánto quiere ocupar cada elemento.
[html] <div layout=”row”><div flex=”30”></div>
<div flex></div>
</div>
[/html]
En este caso el primer elemento hijo ocupará el 30% de la anchura y el segundo hijo ocupará el restante.
Si indicamos que la dirección del layout es “column”, los hijos se apilan en columna de arriba a abajo. El eje vertical es ahora el eje de la dirección del layout, y el eje horizontal es el perpendicular a la dirección del layout.
[html] <div layout=”column”><div>elemento1</div>
<div>elemento2</div>
</div>
[/html]
Alineación de elementos hijos
Aquí entra en juego el atributo layout-align:
layout-align=”alineación_eje_dirección_layout alineación_eje_perpendicular_layout”
Los valores permitidos son:
- eje de dirección layout:
start* | center | end | space-around | space-between - eje perpendicular a la dirección del layout:
start | center | end | stretch*
* Valores por defecto
Dada una template con layout=”row”, si quisiéramos alinear los elementos centrados horizontalmente y en en la parte inferior, quedaría algo así.
[html] <div layout=”row” layout-align=”center end”><div>elemento1</div>
<div>elemento2</div>
<div>elemento3</div>
</div>
[/html]
Esta plantilla se mostraría de la siguiente forma:
Las otras propiedades que podemos aplicar sobre el primer parámetro (el de la dirección del layout), son:
- El valor space-around, aplica espacio por igual alrededor de los elementos hijos.
[/html]
- El valor space-between, aplica espacio por igual entre los elementos hijos.
[/html]
Si en el segundo parámetro no indicamos nada o ponemos stretch, que es el valor por defecto. El elemento hijo crecerá en el eje perpendicular a la dirección del layout.
[html] <div layout=”row” layout-align=”start stretch”>[/html]
Conclusiones
La API de flexbox en angular material, nos facilita mucho el diseño responsive de una plantilla. Nos permite con mucha facilidad centrar elementos en un contenedor, o hacer una plantilla que ocupe toda la altura de la pantalla.
Flexbox tiene algunas propiedades extras que aún no nos proporciona la API de Angular materials como por ejemplo “row-reverse” o “column-reverse” para la dirección del layout, pero siempre podemos aplicarlas vía css.
Es importante saber cómo funciona flexbox para entender cómo se distribuyen los elementos hijos. La clave está en que indicando la dirección del layout (layout=”row” o layout=”column”) del contenedor padre, los elementos hijos tienen un eje de dirección del layout por donde se distribuyen los elementos hijos y otro perpendicular a ese eje. Estos ejes nos ayudan a comprender mejor el funcionamiento del layout-align como ya hemos descrito anteriormente.
Cada vez más se está optando por esta forma de diseño adaptativo mediante flexbox, así pues boostrap 4, que aún está en su versión alfa, lo han incluido.
Ahora a probar.
Leave a Reply