El documento detalla el concepto de cajas flexibles (flexbox) en diseño web, describiendo sus propiedades, comparaciones con métodos anteriores y su implementación futura. Se presentan propiedades clave como 'display: flex', 'flex-direction' y 'flex-grow', junto con ejemplos prácticos y recursos adicionales. Además, se mencionan consideraciones sobre compatibilidad y posibles errores al utilizar flexbox.

1. 1 CONFIDENTIAL
Flexbox
La tendencia de las Cajas Flexibles

2. 2 CONFIDENTIAL
Agenda
● “Cajas flexibles” - Antes y Después
● Concepto
● Propiedades
● Consideraciones
● Compatibilidad
● Ejemplos

3. 3 CONFIDENTIAL
Antes y Después
● Pasado: tablas
● Presente:
○ float
○ clear
○ vertical-align
○ display: inline-block/table
● Futuro: flexbox

4. 4 CONFIDENTIAL
“Caja Flexible”
● Que es una Caja Flexible?
● Porqué usarlas?
● Modelo

5. 5 CONFIDENTIAL
Propiedades
● Display: flex
● Axes:
○ flex-direction
○ justify-content
○ align-items
○ align-self
○ align-content
● Direction:
○ order
○ flex-flow
● Lines:
○ flex-wrap

6. 6 CONFIDENTIAL
● Dimensions:
○ min-height
○ min-width
○ flex-grow
○ flex-shrink
○ flex-basis
○ flex (flex-grow + flex-shrink +
flex-basis)
Propiedades

7. 7 CONFIDENTIAL
● flex-direction:
Propiedades

8. 8 CONFIDENTIAL
● justify-content:
Propiedades

9. 9 CONFIDENTIAL
● align-items:
Propiedades

10. 10 CONFIDENTIAL
● align-content: “this property has no effect when there is only one line of flex items.”
Propiedades

11. 11 CONFIDENTIAL
● align-self:
Propiedades

12. 12 CONFIDENTIAL
● order:
● flex-wrap:
Propiedades

13. 13 CONFIDENTIAL
● flex-flow: flex-direction + flex-wrap
Propiedades

14. 14 CONFIDENTIAL
● flex-grow:
Propiedades

15. 15 CONFIDENTIAL
● flex-shrink:
Propiedades

16. 16 CONFIDENTIAL
● flex-basis:
Propiedades

17. 17 CONFIDENTIAL
Compatibilidad

18. CONFIDENTIAL18
Ejemplos - Práctica

19. 19 CONFIDENTIAL
● Guías:
○ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
○ https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flex
ibles_CSS
● Ejemplos:
○ http://flexboxfroggy.com/
○ https://philipwalton.github.io/solved-by-flexbox/
○ https://davidwalsh.name/flexbox-dice
○ http://bennettfeely.com/flexplorer/
● Bugs:
○ https://github.com/philipwalton/flexbugs
Referencias

20. 20 CONFIDENTIAL
¿Preguntas?