Grilla Flexbox: una perla del CSS3

Con el avance de las versiones de HTML y CSS, el diseño web va simplificando procesos.

Hasta hace poco la única manera de armar columnas era con float. Y la lógica era muy poco amable.

Desde hace unos años apareció flexbox, que ha ido cambiando la sintaxis. Ahora se ha estabilizado y los nuevos navegadores lo incluyen.

Este nuevo modelo de caja, organiza a los elementos hijos de esa caja horizontal o verticalmente.

Entonces ahora  al valor de la propiedad Display, se le suma flex:  display: flex o display: inline-flex.

csstricks2

CSS Tricks: A Complete Guide to Flexbox

Esta propiedad puede utilizarse en maquetado fijo, pero donde cobra mayor poder es en layouts líquidos o responsive.

Para empezar a usarlo, comparto con ustedes algunos recursos: un ejemplo mínimo, una guía de CSS Tricks que explica visualmente cada una de las opciones de flex que podemos usar, o bien pueden usar esta demostración en vivo para ver las diferentes capacidades. Por ejemplo, cambien el parámetro flex-wrap a wrap, y agranden el ancho. Van a ver como flotan los elementos y se acomodan en 2 líneas.

En Can I Use pueden ver el soporte que tiene según navegador y versión.

CanIuse-flexbox

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *