Flexbox es una propiedad nueva de CSS3 que viene a solucionar uno de los mayores problemas de los diseñadores de páginas web: cómo crear páginas flexibles, fluidas y dinámicas que funcionen en la amplia variedad de dispositivos existentes utilizando CSS. Gracias a Flexbox podemos construir webs olvidandonos de los «float» y «position».
En que consiste FlexBox
El objetivo de FlexBox es crear un modelo de caja o contenedor optimizado para los distintos dispositivos que usan los usuarios de una web. En CSS 2.1 se establecieron cuatro formas de crear una caja: block, inline, table y position. Ahora se crea un modelo de caja nuevo, la caja flexible o FlexBox con display: flex;
Funciona ajustando los tamaños y la disposición de los elementos que se encuentran dentro de un contenedor o caja, de tal manera quese adapten siempre al espacio disponible. Permite posicionar dichos elementos internos con gran facilidad, de manera independiente al orden en el que aparezcan en el código.
FlexBox está pensado para componentes de una web o aplicación, a diferencia de un Grid Layout, que está pensado para el diseño y disposición de la web en su conjunto. No es recomendable usar FlexBox para crear la disposición de toda la página, sino sólo para sus componentes.
La declaración display: flex; define un “contenedor flexible” y convierte de forma automática a sus “hijos” directos en “elementos flexibles”.
Diferentes escenarios dependiendo del navegador
Si nuestros usuarios sólo utilizan los navegadores más modernos
Podemos usar FlexBox, sólo teniendo cuidado con:
– No usar flex-wrap ya que no lo soporta Firefox hasta la versión 28.
– Inluir el prefijo -webkit además del normal sin prefijo, para Safari 7.
– No usarlo para la estructura global de la página, como vimos al principio del artículo.
Páginas recomendadas:
1. Guía para crear cajas flexibles (en inglés)
2. FlexBox en el mundo real (en inglés)
Podría entrar más al detalle y explicar como usar esta propiedad pero para eso estan los encales y Google, este articulo solo pretende darte un vistazo rápido, en cualquier caso puedes dejar tu comentario.
Un saludo.
