FlexboxLa novedad en CSS3 para crear layouts Flexibles.

¿Quien soy yo?

David Gaitán

Desarrollador Web

http://davidgaitan.com

HTML5 - CSS3 - JavaScript - Wordpress - Laravel - RoR

¿Qué es Flexbox?Flexbox es una nueva forma de diseño en CSS3 para mejorar la manera en que

desarrollamos layouts “Responsive Design”, evitando así el uso de float en el grid .

Gracias a FlexBox facilitamos la forma en que posicionamos elementos, es más simple

y usamos menos código.

Volvamos en el tiempoNormalmente o mejor dicho “Antes”, cuando definíamos nuestros layouts o nuestro

grid, lo hacíamos con floats. Normalmente Bootstrap 3 está con Floats al igual que

todos los Frameworks que comúnmente conocemos. (Semantic UI está con Flexbox)

Hoy en día, con la gran novedad y ventaja que nos trae Flexbox, todos estos

frameworks Front-end están migrando a esta nueva tecnología, porque en realidad es

muy pero muy buena y conveniente además.

¿Cómo es eso de los floats?Pongamos como ejemplo a Bootstrap 3, donde todo el grid que trae este framework

está hecho a base de floats. Normalmente para crear un grid con dos columnas

hacíamos lo siguiente:

¿Que teníamos como resultado?El código anterior nos retornaba lo siguiente:

.container

.row

.col-xs-12.col-sm-6 .col-xs-12.col-sm-6

¿Pero dónde está el problema?El problema está en los floats, si bien pensamos en la forma que se comportan los

elementos, damos con que esto bien anticuado. Veamos, el container es el encargado

de poner la alineación de todos los elementos, donde por defecto es el padre de todos

los demás elementos, pero luego, dentro del container metemos un row y

posteriormente las columnas ¿Qué pasa si hacemos esto nosotros en un archivo html y

sin bootstrap?

Veamos...

.container

.row

.col-xs-12.col-sm-6 .col-xs-12.col-sm-6

.container => ::before, ::after

.row => ::before, ::after

.col-xs-12.col-sm-6 .col-xs-12.col-sm-6

¿Y en código?

¡Ahora olvídate de todo esto!Todo lo que vimos anteriormente debes superarlo porque ahora eso ¡Ya no se usará!

Ahora con Flexbox le vamos a decir adiós a los floats y a los pseudo-elementos que

teníamos que usar para crear un layout.

Ahora la historia es esta:Ahora con flexbox todo es más fácil, solamente hay que leer y practicar un poquito :)

Para comenzar veamos la siguiente imagen:

.container

.item-50 .item-50

.container

.item-50 .item-50 .item-50

.container

.item-50 .item-50

.item-50

Con Flexbox hasta los elementosCon Flexbox es más fácil hacer hasta los menús, sidebar, etc…

Lo que vemos arriba es un menú simplemente hecho con Flexbox, donde no existen

los floats y mucho menos los text-align.

Jugando con el GridAlgo que particularmente me gusta mucho de Flexbox es que con el contenedor padre,

tu puedes hacer lo que quieras con todos los hijos. Y cuando digo “hacer lo que quiera”

me refiero a hacer de todo:

1. Ordenar los elementos de izquierda a derecha o al contrario.

2. Convertir en columnas o en filas.

3. Poner al centro todos los hijos de un contenedor padre.

4. Separarlos entre sí.

5. Y mucho más...

Column ó RowEl valor por defecto de la dirección de los hijos de un contenedor (flex-direction) es de

row. Pero nosotros podemos cambiar ese valor:

flex-direction : row;

1 2 3

Column ó Rowflex-direction: row-reverse;

3 2 1

Column ó Rowflex-direction : column;

1

2

3

Column ó Rowflex-direction : column-reverse;

1

2

3

Justificando los itemsTambién podemos cambiar la ubicación o posición de los items, siempre ordenando

esto desde el contenedor padre:

justify-content : flex-start;

1 2 3

justificando los itemsjustify-content : flex-end;

1 2 3

Justificando los itemsjustify-content : center;

1 2 3

Justificando los itemsjustify-content : space-between;

1 2 3

Alineando los itemsAdemás de justificar los items, también podemos alinearlos dependiendo siempre del

contenedor padre.

align-items : stretch;

1 2 3

Alineando los itemsalign-items : flex-start;

1 2 3

Alineando los itemsalign-items : flex-end;

1 2 3

Alineando los itemsalign-items : center;

1 2 3

Hay mucho más...Flexbox es un tema muy, pero muy amplio. Es difícil abordarlo todo

en una sola charla, pero si quisiera que les quede la curiosidad de

seguir investigando más acerca de esta excelente tecnología. Cuando

veas las posibilidades que te da Flexbox, te darás cuenta que esto

mundo es en realidad genial.

¡Gracias!