Guía completa - Flexbox CSS3 (Que es y como usarlo)

Que es y como usar flexbox.

Buenas gente, recientemente encontré estas nuevas propiedades de CSS que te permiten maquetar de manera sencilla y rápida.
Antes costaba montones alinear cajas en un contenedor por mas que tengamos la propiedad float esta interfería con los margenes de las cajas y nos dejaban cálculos engorrosos para solucionar.

Otra gran dificultad era alinear respecto de, es decir alinear respecto a las cajas hermanas o del contenedor, ni hablar si el alineado era vertical para solucionar eso debíamos recurrir a parches con javascript.

Gracias a flexbox podemos alinear, organizar y distribuir elementos con muy poco css y nos permite hacer diseños responsives ya que si lo aplicamos bien las cajas irán tomando la forma que nos permita la pantalla.

Para lograr esto necesitamos tener un contenedor que contenga items.



el código seria el siguiente:

HTML:

Code: [Select]

<section class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</section>

CSS:

Code: [Select]

.container{
display: flex;
border: 4px solid green;
}

.item{
flex: 1;
background: red;
min-width: 200px;
min-height: 200px;
border: 2px solid #000;
}

Con la propiedad display:flex en el contenedor le estamos diciendo que el contenedor adopte el comportamiento flexible y al darle a cada item flex: 1 le estamos diciendo que ocupen cada uno igual proporción:

Ejemplo en vivo: http://www.smfsimple.com/blog/tutoriales/flexbox/ejemplo1/

Entonces ya sabiendo lo que necesitamos y como funciona podemos darle distintas características a nuestra caja flexible.

Propiedades flexbox:

Primero dejo el link a cada demo para una rapida vista de cada uno, les recomiendo ver el archivo estilos.css y el codigo html de cada una de las paginas para entender en profundidad como funciona cada ejemplo.

• align-content
     
  • Center
  • Flex-end
  • Flex-start
  • Space-around
  • Space-between
  • Stretch
• aling-items
     
  • Center
  • Flex-end
  • Flex-start
  • Stretch
• align-self
• flex-basis
• flex-direction (Column)
• flex-grow
     
  • Equitativo
  • grow
• flex-shrink
• flex-wrap
• justify-content
     
  • Center
  • Flex-end
  • Flex-start
  • Space-around
  • Space-between
• order

Propiedades del contenedor:

flex-direction

Permite indicar en que dirección se mostraran los items.

Code: [Select]

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
row: es por defecto, pone una caja al lado de la otra en forma horizontal.

column:


Permite poner un item debajo del otro en forma vertical.

Y los reverse alteran el orden de las cajas.

flex-wrap:

Por defecto las cajas intentaran ponerse una al lado de otra ocupando una linea (nowrap), esto hará que los tamaños se achican para encajar dentro de una linea.
Si lo que queremos es cambiar ese comportamiento y hacer que la siguiente caja se ponga abajo utilizamos esta propiedad.

Code: [Select]

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-wrap: wrap

Code: [Select]

.container{
display: flex;
border: 4px solid green;
flex-wrap: wrap;
}

.item{
min-width: 400px;
background: red;
min-height: 200px;
border: 2px solid #000;
}
Hay que tener en cuenta que no podemos darle ancho relativo a cada caja porque sino se acomodarían una misma linea.

justify-content
Una de las propiedades que mas nos ayuda a acomodar nuestros items de la manera que necesitamos.
Acomoda los items según el eje horizontal de distintas maneras:

Code: [Select]

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start: acomoda las cajas a la izquierda contenedor


flex-end: acomoda las cajas a la derecha del contenedor


center: acomoda las cajas al centro del contenedor


space-between: acomoda cada caja lo mas separada de la otra que se pueda manteniendo la proporción de distancia entre ellas.


space-around: acomoda cada caja distribuyendo el total del espacio entre ellas



align-items:
Otra gran salvación, nos permite alinear los items de manera vertical según el alto de nuestro contenedor.

Code: [Select]

.container {
  align-items: flex-start | flex-end | center | stretch;
}
flex-start: Se alinean verticalmente arriba y caen según su tamaño.


flex-end: Se alinean verticalmente abajo y suben según su tamaño.


center: Se alinean verticalmente en el medio del espacio total


stretch: Ocupara todo el espacio vertical (el item no debe tener un height determinado)


align-content:
Cómo se distribuyen las filas de items en el contenedor, sólo aplica si hay más de una fila de elementos.

Code: [Select]

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start: Cada linea se acomoda al principio del contenedor


flex-end: Cada linea se acomoda al final del contenedor.


center: Las lineas se acomodan en el centro del contenedor.


space-between: La primer linea arriba en el contenedor, la ultima abajo y las demas se distribuyen el espacio equitativamente en el contenedor.


space-around: Todas las lineas se distribuyen proporcionalmente en el espacio del contenedor.


stretch: (DEFECTO) las lineas crecen para ocupar el máximo del contenedor no deben tener un height definido para poder utilizar esta propiedad.


Propiedades del los items:

order:
Nos permite cambiar el orden en el que aparece nuestra caja, por defecto el orden es el orden que tienen en el html pero si nosotros quisiéramos alterar ese orden podríamos hacer que la ultima caja sea la primera.

Code: [Select]

.item {
  order: <entero>;
}
Por defecto:

Code: [Select]

<section class="container">
<div class="item it1">SMFSIMPLE 1</div>
<div class="item it2">SMFSIMPLE 2</div>
<div class="item it3">SMFSIMPLE 3</div>
</section>


Code: [Select]

.container{
display: flex;
border: 4px solid green;
height: 200px;
}

.item{
flex: 1;
min-width: 250px;
height: 100px;
background: red;
border: 2px solid #000;
margin: 5px;
color: #FFF;
}



Ahora si le indicamos el orden a cada div podemos manipularlo y decir quien estará primero.

Code: [Select]

.it1{
order: 2;
}
.it2{
order: 3;
}
.it3{
order: 1;
}



Demo: http://www.smfsimple.com/blog/tutoriales/flexbox/order/

Esto nos permitirá acomodar nuestras cajas y es realmente útil cuando queremos hacer diseños responsives ya que podemos manipular totalmente los elementos usando el orden y media-querys

flex-grow:

Nos permite definir como crecerá cada item respecto de los demás, osea permite que decidamos la proporción de cada item respecto del resto que ocupa el que contenedor.

Code: [Select]

.item {
  flex-grow: <numero>; /* defecto 0 */
}
Ejemplos:

Si ponemos que todos los items tengan flex-grow: 1 estos se distribuirán el espacio de igual medida equitativamente.

http://www.smfsimple.com/blog/tutoriales/flexbox/flex-grow/equitativo



De lo contrario, podemos setearle a cada item su proporción.

Code: [Select]

.it1{
flex-grow: 2;
}

.it2{
flex-grow: 1;
}

.it3{
flex-grow: 1;
}

De esta manera el item1 ocupara el doble de las otras dos cajas.

http://www.smfsimple.com/blog/tutoriales/flexbox/flex-grow/


flex-shrink:

La inverso a flex-grow, nos va a decir en proporción cuando se achica un item respecto al resto si el espacio no alcanza.

Code: [Select]

.item {
  flex-shrink: <numero>; /* defecto 1 */
}

Entonces si tenemos este ejemplo:
http://www.smfsimple.com/blog/tutoriales/flexbox/flex-shrink/


Tenemos este html y css:

Code: [Select]

<section class="container">
<div class="item it1">SMFSIMPLE 1</div>
<div class="item it2">SMFSIMPLE 2</div>
<div class="item it3">SMFSIMPLE 3</div>
</section>


Code: [Select]

body{
max-width: 1024px;
background: #CCC;
margin: 0 auto;
}
.container{
display: flex;
border: 4px solid green;
height: 200px;
}
.item{
height: 100px;
width: 500px;
background: red;
border: 2px solid #000;
margin: 5px;
color: #FFF;
}
.it3{
flex-shrink: 2;
}

Veremos que el contenedor tiene como máximo 1024px y cada bloque ocupa 500px, al ser 3 bloques deberíamos achicar alguno y lo hacemos con flex-shrink.
Le decimos que al NO haber espacio suficiente reduzca el ultimo bloque a la mitad del resto y de esa manera queda mas chico y el espacio es suficiente.

flex-basis:
Nos permite indicar un ancho definido a cada item, si no es definido se define en auto y crece según el contenedor.

Code: [Select]

.item {
  flex-basis: <length> | auto;
}
Ejemplo:

Ejemplo: http://www.smfsimple.com/blog/tutoriales/flexbox/flex-basis/

Code: [Select]

.container{
display: flex;
border: 4px solid green;
height: 200px;
}

.item{
height: 100px;
background: red;
border: 2px solid #000;
margin: 5px;
color: #FFF;
}

.it1{
flex-basis: 400px;
}
.it2{
flex-basis: 200px;
}
.it3{
flex-basis: 100px;
}

align-self:
Permite sobreescribir el alineado definido por align-items, entonces podremos decirle a este item particular donde ubicarse sin afectar al conjunto.

Code: [Select]

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Los valores son los mismos que en la propiedad align-items, referenciarse a ella para entender cada uno.

Ejemplo: http://www.smfsimple.com/blog/tutoriales/flexbox/align-self/

Code: [Select]

.container{
display: flex;
border: 4px solid green;
align-items: flex-start;
height: 500px;
}

.item{
min-width: 100px;
background: red;
border: 2px solid #000;
margin: 5px;
color: #FFF;
}

.it1{
height: 200px;
}
.it2{
height: 100px;
align-self: center;
}
.it3{
height: 400px;
align-self: flex-end;
}
.it4{
height: 300px;
}

Como podemos ver el item1 y 4 siguen tomando la propiedad align-items: flex-start pero sobreescribimos la propiedad del item 2 y 3 para darle una distinta al del contenedor.

flex:

Por ultimo tenemos flex que nos permite setear 3 propiedades en una sola (shorthand)

Code: [Select]

.item {
  flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
}
Entonces tenemos la opción de setear directamente con una sola propiedad el grow el shrink y el basis.


Esas son todas las propiedades que tiene Flexbox, como pueden ver podemos manipular cada item de un contenedor de manera muy fácil y prácticamente podemos hacer todo lo que necesitemos hacer.

Flexbox compatibilidad:
http://caniuse.com/#search=flexbox

Como pueden ver funciona perfectamente en todos los navegadores modernos por lo que no hay ningún excusa en usarlo.
En safari tendremos que utilizar el prefijo -webkit- pero si se quieren olvidar de esto pueden utilizar pre-procesadores que incluyan estos prefijos o un plugin de sublime text como lo es sublime-autoprefixer

Extras:

- Me gustaria indicarles primero que nada un gran resumen que abro siempre que me olvido alguna propiedad y que me parece genial a la hora de revisar rápidamente como funciona esto: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

- Y para el que le gusta lo didáctico hay varios generadores de código que permiten interactivamente armar el esqueleto de nuestro contenedor e items.
http://the-echoplex.net/flexyboxes/

Próximamente traeré algunos layouts diseñados con flexbox para que pueda apreciar realmente la potencia que tiene esta propiedad.
Saludos espero que les sirva.

Felicidades amigo, muy buen trabajo!!


Saludos y éxitos!!

Gracias man, espero que les sirva a los que empiezan con este tema.
Saludos!

Qué prometedor se ve eh

Tengo una duda con el flex-wrap: wrap.

Qué quieres decir con:

Hay que tener en cuenta que no podemos darle ancho relativo a cada caja porque sino se acomodarían una misma linea.

?

Muy buena información, me parece que esta sencilla y concreta. Buen trabajo.

Saludos.