Diseño flexible
usando
Flexbox
Definiendo "layouts" complejos
![](http://www.sawyoo.com/postpic/2009/08/free-web-page-layout-templates_666370.jpg)
![](http://2.bp.blogspot.com/-41v6n3Vaf5s/UeRN_XJ0keI/AAAAAAAAN2Y/YxIHhddGiaw/s1600/css.gif)
Es un modelo de "caja" en CSS optimizado para el diseño de interfaces de usuario. En el modelo "flex" los hijos de el contenedor pueden ser manipulados en cualquier dirección, y son capaces de "ajustar" su tamaño, ya sea creciendo lo suficiente para ocupar el espacio inutilizado ó encogerse para evitar rebasar el contenedor. Tanto el alineamento horizontal como el vertical de los hijos puede ser manipulado fácilmente.
- W3C
¿Que es flexbox?
Creando un contenedor flexbox
.container {
display: flex;
display: -webkit-flex;
}
Definir un contenedor
<div class="container">
<div id="child-1"></div>
<div id="child-2"></div>
<div id="child-3"></div>
</div>
Con elementos hijos en el HTML
Propiedades del contenedor
.container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/263/images/3429268/Screen_Shot_2017-01-24_at_1.20.24_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/263/images/3429270/Screen_Shot_2017-01-24_at_1.23.32_PM.png)
flex-direction
flex-wrap
![](https://s3.amazonaws.com/media-p.slid.es/uploads/263/images/3429289/Screen_Shot_2017-01-24_at_1.27.53_PM.png)
justify-content
Propiedades de los hijos
#child-1 {
order: <int>;
flex-grow: <number>;
flex-shrink: <number>;
}
flex-grow
flex-shrink
order
![](https://s3.amazonaws.com/media-p.slid.es/uploads/263/images/3429329/Screen_Shot_2017-01-24_at_1.36.02_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/263/images/3429385/Screen_Shot_2017-01-24_at_1.49.18_PM_1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/263/images/3429391/Screen_Shot_2017-01-24_at_1.50.40_PM.png)
Compatibilidad con navegadores
![](https://s3.amazonaws.com/media-p.slid.es/uploads/263/images/3429398/Screen_Shot_2017-01-24_at_1.52.10_PM.png)
http://caniuse.com/#feat=flexbox
Recursos para aprender flexbox
http://flexboxfroggy.com/
http://www.w3schools.com/css/css3_flexbox.asp
![](https://s3.amazonaws.com/media-p.slid.es/uploads/263/images/3429765/frogflex.png)
https://flexbox.io/
Q & A
http://rodkings.plethora.com.mx
rodrigo@plethora.com.mx
Rodrigo Reyes
Front-End and UX developer
deck
By Rodrigo Reyes
deck
- 749