Qué es Flexbox

Diseño Web 14 febrero 2017

Que es Flexbox

Flexbox es una nueva de trabajar que tenemos con CSS3.

Esa es la mejor respuesta a la pregunta de qué es Flexbox. Pero hay que ampliarla un poco. Y por ello, en este artículo te quiero contar en qué consiste, ventajas, cómo funciona, dónde comprobar si es compatible y, para finalizar, una plantilla o template para que ilustre todo mucho mejor.

Definición de Flexbox

Es un nuevo módulo con el que se puede empezar a realizar diseños responsive de una forma mucho más fácil para los diseñadores. Esto es debido a que se deja de lado el famoso “float: right” o el “float:left”, tan sufrido tantas veces por parte de los diseñadores y maquetadores web.

Con esta forma de trabajar los diseñadores van a trabajar de una forma mucho más asequible, ya que su principal ventaja es que se puede obtener el mismo resultado, pero de forma mucho más fácil. Esto puede parecer muy bonito, pero realmente hasta que no se observa no se puede creer.
Para mí, algo que me fascinó de Flexbox es su facilida de uso, es tan fácil que parece que tiene que tener algún truco. Y lo que mejor define a flexbox es:

Obtén el mismo resultado, pero escribe menos.

Ventajas de Uso

Lo bueno que tiene flexbox, es que puedes colocar los elementos tanto en ejes horizontales como verticales. Es decir, se pueden colocar los elementos dentro de la “caja” alineados en los dos ejes, X e Y. Conseguir esto antes de flexbox no era tan sencillo como pueda parecer, teníamos que saber por ejemplo la altura de la caja para poder alinearlo horizontalmente.

Cómo Funciona

Flexbox está basado en “cajas flexibles” y estas cajas están colocadas y estructuradas en torno a una sencilla estructura de padres e hijos.

Los padres se colocan en el espacio, y dentro de estos padres, se colocan sus hijos. Todo ello de forma descendiente y jerárquica. Ahora mismo parece muy difícil de entender, pero con unos ejemplos lo verás rápidamente.

Compatibilidad

Al ser un modo de trabajar relativamente nuevo, hay algunos navegadores que no lo aceptan, como no, ahí está Internet Explorer. Para poder ver la compatibilidad con los distintos navegadores, puedes visitar la web www.caniuse.com, que te puede servir tanto para flexbox como para cualquier propiedad de CSS, en la que te indicará en qué navegadores está disponible. Una página muy recomendable de tener en la memoria.
Pero también te deje el enlace directo para que puedas ver el soporte de los navegadores con Flexbox www.caniuse.com/flexbox

Plantilla o Template de Flexbox

Para poder ilustrar un poco mejor, aquí os dejo el enlace de una maqueta o template básico que está hecha en flexbox, para que le podáis echar un vistazo, trastear y jugar con ella.

Enlace a GitHub
Datos del artículo
Qué es Flexbox
Título
Qué es Flexbox
Descripción Breve
Descripción de qué es Flexbox, junto con las ventajas, cómo funciona, compatibilidad y plantilla de Flexbox. Perfecto para diseñadores y Maquetadores
Autor
Publicado en:
aexpositogonzalez.com
Logotipo:

Deja un comentario

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