Flexbox CSS3. Tutorial en español. Descripción y ejemplos HTML

Qué es Flexbox y cómo se utiliza.

Flexbox viene de «Flexible Box Layout«, que se puede traducir como «Diseño de caja flexible«, y nos aporta una magnífica solución para todos nuestros desarrollos «responsive». Lo que nos permite es crear un conjunto de elementos flexibles que se adaptan automáticamente a su contenedor y con el que podemos controlar parámetros tales como la alineación, dirección (horizontal/vertical), ajuste de la fila según tamaños y multitud de posibilidades que vamos a presentar en este artículo.

En cuanto a compatibilidad, Flexbox es actualmente compatible con los navegadores web más importantes y diferentes versiones de los mismos, si bien en algunos debemos utilizar prefijos css para su buen funcionamiento (ver en caniuse.com). Si tenéis problemas con algunas versiones antiguas, podéis probar a utilizar «Autoprefixer«. En los siguientes ejemplos utilizaremos el código css tal cual, sin añadidos, así que espero que vuestro navegador esté actualizado.

La última definición conocida sobre Flexbox del W3C es del 26 de Mayo de 2016 en el momento de escribir este artículo. En el enlace podemos ver su definición y diferentes ejemplos de uso. Como se indica en la introducción, hasta ahora conocíamos cuatro modos de disponer los elementos, tres de presentación (con variaciones alternativas) y otro de posición:

Flexbox es una mezcla de todos ellos en cuanto a cómo afecta a la disposición de una estructura de elementos contenidos en una capa padre o contenedor, y se define como «flex» en la propiedad «display» (display:flex). Podemos crear una estructura de elementos en línea similar a una tabla, o hacer que funcionen como un bloque y en orden inverso en la siguiente resolución, todo ello a la vez que se adapta automáticamente al tamaño que necesitamos, tanto en anchura como en altura. Sí, ¡¡también en altura!!

Seguir leyendo -->