Guía visual para aprender Flexbox de CSS3

14 Comentarios

El modulo Flexbox Layout o como es llamado oficialmente CSS Flexible box Layout Module es el nuevo modelo de layout implementado en la especificación CSS3 para mejorar el alineamiento, dirección y orden de los elemento en el documento web, incluso cuando estos tienen algún tamaño aplicado dinámicamente o incluso desconocido. La principal característica del contenedor flexible es la capacidad de modificar la anchura o la altura de los elementos hijos para así llenar los espacios disponibles de la mejor manera posible adaptándose a cualquier dispositivo o a cualquier resolución. Muchos frontend encuentran este modelo FlexBox muy fácil de usar, porque el posicionamiento de los elementos es mucho más simple por lo tanto los diseños complejos se puede lograr con poco código css. Cabe decir que este Modelo de Layout fue presentado en el año 2009 y desde su salida su sintaxis ha cambiado en varias ocasiones sin embargo en septiembre del 2014 se ha establecido el último working draft o último borrador en la especificación la cual veremos en esta guía.

En esta Guía visual para aprender Flexbox de CSS3 o Modelo de caja flexible no solo veremos las diferentes propiedades de flexión sino también cómo estas afectan al diseño de manera visual.

Conceptos básicos de Flexbox

Para entender bien este modelo de Layout debemos de entender algunos conceptos básicos. Primero la disposición flex debe de estar constituido por elementos padres e hijos, el padre será el contenedor Flexible “flex container” y los hijos inmediato serán los elementos Flexibles “flex item”.

flex layout

En la imagen anterior vemos como la W3C nos presenta gráficamente el modelo flexbox con sus fundamentos, puntos importantes y como está pensado para su funcionamiento.


¿Como empezamos con Flexbox?

Para comenzar a utilizar el modelo Flexbox lo primero que debemos de hacer es establecer la propiedad display con los valores flex o en su defecto inline-flex en el elemento padre. Esto lo convertirá en el flex container, y estará listo para contener elementos flexibles.

.flex-container {
    display: flex; /* ó inline-flex */
}

display: flex o display: inline-flex Son los valores de la propiedad display que necesitamos para configurar el contenedor principal y de esta manera todos sus hijos inmediatos se convertirán en elementos flexibles de forma automática.

La única diferencia que hay entre los valores flex y inline-flex es la disposición en la que esta se establece en el documento, al final es similar al establecimiento de display: block y display: inline-block.

  • flex: Hace que el elemento HTML sea un bloque. Los elementos del bloque generalmente comienzan una nueva línea y los elementos hermanos aparecen en diferentes líneas.
  • inline-flex: Hace que el elemento HTML sea un elemento en línea. Los elementos en línea no inician una nueva línea y sus hermanos pueden aparecer en la misma línea, pues estos ocupan solo el tamaño de su contenido.

Display Flex - Flexbox

El conjunto de propiedades que nos presenta la especificación CSS3 en cuanto al modulo Flexbox las podemos dividir en dos grupos, las propiedades para el elemento contenedor flex y las otras propiedades para los elementos hijos flexibles. Estas las vamos a ver a continuación.


Propiedades para el contenedor Flex

Flex Direction
Flex Wrap
Flex Flow
Justify Content
Align Items
Align Content

Propiedades aplicables a los Flex items

Como ya sabes, cuando nos referimos a los flex items nos referimos a los hijos directos del contenedor flexible. Veamos las diferentes propiedades que se aplican a estos elementos.

Order
Flex Grow
Flex Shrink
Flex Basis
Flex
Align Self

Hemos visto cada propiedad y cada valor estipulados en la especificación para el modulo css Flexible box Layout Module de CSS3. A continuación puedes ver el soporte del modulo con sus propiedades en los diferentes navegadores y versiones.

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Comentar

avatar
Nuevos Antiguos Más votados
Felipe

hola, esta muy explicado esta guia para aprender flexbox. Gracias master.

emiligenevila

El código de ejemplo de Flex-Flow creo que está equivocado.
Donde dice:
flex-wrap: row-reverse wrap;
¿no debería decir:?
flex-flow: row-reverse wrap;

David González

Fantástico aporte!

maraijo

El link del ejemplo “align-items: baseline ” esta roto.

Victor Marquez

Estoy buscando información sobre el tema de los flexbox, he visto alguno y he escuchado observado muchos vídeos, pero en realidad la información que presentan aquí es estupenda, he aprendido muchísimo gracias ha este material. Felicitaciones !!!

Jose luis

Muy claro,, gracias por compartir esta info. Buen blog

Yorvin Silva

Muy Muy Muy bueno gracias hermano

Juan Carlos

Excelente guía en español para aprender Flexbox, gracias por tomar el tiempo para realizarla.

Jose Luis Lopez

buena guía, gracias por compartir

lenin

muuy bueno y util gracias por el tiempo que te das para podenos enseñar cosas como estas 😉

catlike Yucateca

Muchas gracias por la guía. ¡Está genial!
¿Podrían revisar el enlace del ejemplo para align-self?

Luis Miguel

Excelente aporte

Daniel Fontanes

Estaba mejor como lo tenías la otra vez que no había que andar a abrir pestañas y era usar el scroll y dar un espacio a las imágenes a la que mas convenía, pero gran trabajo igualmente 🙂