Guía completa de Flexbox desde 0

Hace ya unos artículos atrás escribimos una pequeña guiá basica sobre Flexbox, en esta ocasión venimos con una guia completa sobre Flexbox, porque cada vez es mas importante en el diseño web y poco a poco esta siendo implementada en los sitios web.

¿Que es flexbox?

Seguramente te estés preguntando que es Flexbox, si es la primera vez que lo escuchas. Si ya sabes que es puedes saltarte esta parte, pero sino aquí una explicación sobre que es.

Flexbox es un modo de diseño que nos permite crear estructuras para sitios web de una forma mas fácil. Si ya sabes de HTML y CSS probablemente alguna vez habrás visto que los sitios web se realizan utilizando la propiedad float, para desplazar contenedores. Bueno pues con Flexbox ya no necesitaras de usar float para posicionar tus elementos a izquierda a derecha, al contrario, con Flexbox podrás posicionar y distribuir los elementos como tu quieras.

Puedes posicionar un elemento en la posición que desees horizontalmente y por si fuera poco también en forma vertical. Posicionar elementos de forma vertical no es tarea fácil sin Flexbox, incluso muchas veces teníamos que hacer uso de Javascript para hacer cálculos y saber cuanto margen poner a un elemento para centrarlo verticalmente.

No solo puedes posicionar elementos vertical y horizontalmente, sino que puede establecer como se distribuirán, el orden que tendrán e incluso el tamaño que tendrán en proporción a otros elementos. Esto es perfecto para crear diseños adaptables a dispositivos móviles (Responsive Design).

Lo se, todo parece muy loco e incluso hemos mencionado conceptos nuevos, es por eso que hemos hecho esta guía completa en la cual aprenderás que es Flexbox, todas sus propiedades y valores y como utilizarlos.

Guía completa de Flexbox desde 0

La guiá esta en video, es un video largo pero explicamos todo sobre Flexbox, asi que te recomendamos que la veas y muy importante, tomes notas de todo (Aunque abajo tienes una lista de todas las propiedades con los valores posibles).

Recursos mencionados en el video:

Compatibilidad de Flexbox con navegadores web: http://caniuse.com/#search=flexbox

Agregar Prefijos Automáticamente: https://www.falconmasters.com/recursos-herramientas/prefijos-css3-prefix-free/

Como hacer un sitio web / layout responsive con Flexbox CSS3: https://www.falconmasters.com/web-design/sitio-web-layout-flexbox/

Lista de las propiedades Flexbox.

Importante: Las propiedades a continuación no tienen sus prefijos, importante que los agregues, puedes usar Autoprefx-free

Propiedades para el contenedor padre:

Display Flex

Esta propiedad nos permite establecer cual sera el contenedor de los elementos a los que queremos dar un acomodo y/o distribución.

display: flex | inline-flex;

Flex Direction

Nos permite establecer la dirección en la que se acomodaran nuestros elementos.

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

Flex Wrap

Podemos indicar si todos los elementos estarán en linea con su máximo ancho posible o establecido o si queremos que respete el ancho y los elementos se posicionen en varias lineas de elementos.

flex-wrap: no-wrap | wrap | wrap-reverse;

Flex Flow

Es un atajo entre flex-direction y flex-wrap.

flex-flow:row wrap;
/* Primer valor es el valor que le daríamos a flex-direction */
/* Segundo valor es el valor que le daríamos a flex-wrap */

Justify Content

Nos permite decidir la posición de nuestros elementos y la distribución que tendran.

justify-content: flex-end | flex-start | center | space-around | space-between ;

Align Items

Nos permite posicionar / distribuir elementos verticalmente. (solo para una linea de elementos)

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

Align Content

Nos permite posicionar / distribuir elementos verticalmente, igual que align-items, solo que align-content solo funciona para lineas de elementos, por ejemplo cuando tenemos establecido un flex-wrap:wrap; y los elementos se posicionan en varias lineas.

align-content: flex-start | flex-end | center | stretch | space-between | space-around ;

 

Propiedades para los elementos hijos:

Flex Basis

Establecemos el tamaño que tendrá un elemento.

flex-basis:;

Flex Grow

Establecemos la proporción de crecimiento que tendrá un elemento a comparacion con los demás.

flex-grow:1;

Flex Shrink

Establecemos la proporción de encogimiento que tendrá un elemento a comparacion con los demás.

flex-shrink:1;

Flex

Atajo entre flex-grow, flex-shrink, flex-basis

flex:1 1 50%;

Order

Establecemos el orden que tendrá un elemento a comparacion con otros elementos.

order:;

Align Self

Nos permite alinear un elemento independientemente de los demás

align-self: flex-start | flex-end | center | stretch | baseline ;