logoCoderhouse.png
By Coderhouse • septiembre 22, 2015

¿Conoces Flexbox? Aprende a usarlo

Si cada vez que posicionabas elementos en CSS te replanteabas tu carrera como desarrollador Front End ¡No sufras más!

Flexbox Está Aquí :)

Flexbox es un nuevo conjunto de propiedades de CSS que permite posicionar los elementos de una página web y controlar su visualización en diferentes pantallas y dispositivos móviles. Flexbox provee así una alternativa mucho más eficiente que propiedades clásicas como: float clear o  display: block  display: inline;

Si bien las propiedades de Flexbox existen hace varios años, la novedad es que ahora finalmente son compatibles con la mayoría de los navegadores. Así que si todavía no conocías FlexBox ¡Es el momento para empezar! Posicionamiento en CSS es uno de los conceptos más difíciles para cualquier diseñador web, tenga mucha o poca experiencia.

Veamos un poco de Flexbox

Sintaxis y Propiedades Principales de Flexbox

display: flex

La declaración display: flex; define un "contenedor flex" y sus hijos directos (1 y 2 en el ejemplo) automáticamente se convierten en ítems flex. Un contenedor flex tiene un eje principal, que es la dirección por default en que los ítems flex se alinearán. El eje transversal es perpendicular al eje principal. Ambos el eje principal y el perpendicular poseen un set de propiedades que pueden control como los ítems flex se posicionan en relación a los demás. También se puede anidar diferentes contadores flex dentro de otros, ya que la propiedad display no es heredada automáticamente.

Esquema Flexbox

flex-direction

La dirección por default de flex es row (se posicionan en fila de izquierda a derecha), pero la dirección no tiene que ser necesariamente horizontal. Puede ser cambiada con la propiedad: flex-direction con los siguientes valores posibles:

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

flex

flex se combina con las propiedades flex-growflex-shrink y flex-basis.Las propiedades flex-grow y flex-shrink toman un valor no numérico, ya que sólo definen cuanto espacio ocupará cada elemento en proporción a otro. Por default, flex-grow es 1 y flex-shrink es 0, lo que significa que todos los elementos estarán en proporción al resto. Mientras que la propiedad flex-basis define el tamaño de los elementos de antes que el espacio extra sea distribuido y su valor por default es auto.

No hay una manera muy simple de explicar esta propiedad, es mejor que la experimentes en Flexplorer.

justify-content

Si sobra espacio en un contenedor flex, ya sea porque los ítems flex alcanzaron su tamaño máximo o porque son inflexibles, la propiedad  justify-content puede definir como será usado el espacio.

Mira este diagrama de W3C que muestra como se comportan las propiedades que justify-content:

This image from the W3C demonstrates how the various values for the justify-content property will behave.

flex-wrap

Es una propiedad que se le aplica al padre y los valores que puede tomar son:

flex-wrap: nowrap | wrap | wrap reverse

Por defecto los items flex van a tratar de ajustar en una sola fila (no wrap), pero con la propiedad wrap puedes hacer que salten de línea al terminar el contenedor.

flex-wrap

align-items

Define el comportamiento de los items en relación al eje transversal y puede tomar los siguientes valores:

align-items: flex-start | flex-end | center | stretch | baseline

align-items

 

Soporte en Browsers

En general está OK que uses flexbox si sólo necesitas soporte para los últimos browsers. Pero para browsers mas viejos el prefijo -webkit- es requerido.

Para información específica acerca de la compatibilidad con browsers, mira esta tabla de compatibilidad para flexbox de Can I Use .

Recursos

Esto es sólo un pequeño ejemplo de como las propiedades de flexbox se comportan. Por supuesto, hay mucho más de flexbox por aprender. Para mayor información les dejamos esta guía de recursos:

  • Curso de Front End: Aprende acerca flexbox y muchos otros recursos más. Conviértete en todo un desarrollador Front End.
  • Guía completa de Flexbox: Si quieres saber mas acerca de cada elemento y propiedad de flexbox, te recomendamos esta guía de Chris Coyier.
  • CSS Flexible Box Layout Module | W3C: Una guía técnica extremadamente detallada.
  • Flexplorer: Una gran herramienta creada por Bennett Feely que te permite experimentar con las diferentes propiedades y valores flexbox.