Esta presentación explica qué es Flexbox y cómo se utiliza. Contiene varios ejemplos y enlaces como recursos.

1. ¿Qué es y Cómo se Utiliza?
Por Tony López

2. ¿Qué es Flexbox?
Un modo de estructura en CSS3 que provee una forma sencilla y limpia de
organizar los elementos en un contenedor.
● NO USA FLOATS
● Es adaptable y “mobile-friendly”
● Posicionar los elementos-hijos es más sencillo
● Los márgenes del contenedor de Flex no colapsan con los márgenes de su
contenido
● El orden de los elementos puede ser cambiado de manera sencilla sin
cambiar el código de HTML.

3. Flexbox Concepto del Modelo de Caja
● La habilidad de alterar el alto y ancho de los elementos para encajar mejor en
el espacio disponible del contenedor
● Flexbox es agnóstico en dirección. Trabaja bien horizontal y verticalmente.
● Construido para estructuras de escalas-pequeñas. Mientras que “Grid” que
está surgiendo ahora, es para estructuras de escalas-grandes.

4. Diagrama de Flexbox

5. Propiedades de Flexbox
display: flex | inline-flex flex-grow: <number>
flex-direction: row | column flex-shrink: <number>
flex-wrap: wrap | nowrap | wrapreverse flex: <integer>
flex-basis: <lenght> order: <integer>
justify-content: flex-start | flex-end | center
align-self: flex-start | flex-end | center
align-items: flex-start | flex-end | center
align-content: flex-start | flex-end | center

6. Flexbox en Acción

7. Flexbox en Acción

8. Flexbox en Acción

9. Flexbox en Acción

10. Flexbox en Acción

11. Flexbox en Acción

12. Más Recursos
● https://css-tricks.com/snippets/css/a-guide-to-flexbox/
● http://learnlayout.com/flexbox.html
● https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
● https://www.w3schools.com/css/css3_flexbox.asp
● http://flexboxgrid.com/

13. Mi Página Web
● lopezpagan.com
● youtube.com/lopezpagan
● twitter.com/lopezpagan
● facebook.com/lopezpagan
● github.com/lopezpagan
● plus.google.com/+TonyLopezPagan