Hola Flexbox

Introduction to flexbox and a little bit of css layout history

Transcript

1. HOLA, FLEXBOX! exus-tw.github.io/hola- exbox
2. HISTORIA DEL LAYOUT EN CSS
4. TABLAS < t a b l e c e l l p a d d i n g = " 0 " c e l l s p a c i n g = " 0 " b o r d e r = " 0 " > < t b o d y > < t r > < t d c o l s p a n = " 3 " h e i g h t = " 1 2 0 p x " > . . . . < / t d > < / t r > < t r > < t d c l a s s = " m e n u " v a l i g n = " t o p " > . . . < / t d > < t d c l a s s = " c o n t e n t " v a l i g n = " t o p " > . . . < / t d > < t d c l a s s = " a S i d e " v a l i g n = " t o p " > . . . < / t d > < / t r > < t r > < t d c o l s p a n = " 3 " > . . . < / t d > < / t r > < / t b o d y > < / t a b l e >
5. PROBLEMAS Contenido y layout mezclados Cero acessibilidad Código di cil de leer No es semántico
7. BOX MODEL Separa estilo del markup Muy utilizado hoy en día Esto permitió a la web que conocemos hoy
8. . b u t t o n { d i s p l a y : b l o c k ; f l o a t : r i g h t ; w i d t h : 2 0 0 p x ; h e i g h t : 2 0 p x ; p a d d i n g : 1 0 p x ; b o r d e r : 1 p x s o l i d # 3 3 3 ; } . f o o t e r { p o s i t i o n : f i x e d ; b o t t o m : 0 ; m a r g i n - t o p : 1 0 p x ; }
11. CLEARFIX HELL . c l e a r f i x { c o n t e n t : " " ; d i s p l a y : t a b l e ; c l e a r : b o t h ; }
12. POSICIONAR ITEMS EN LA MISMA LINEA . i n l i n e { d i s p l a y : i n l i n e ; f l o a t : l e f t ; d i s p l a y : i n l i n e - b l o c k ; }
13. GRIDS Abstracción del box model Comenzó con Blueprint Creado para poder utilizar columnas
16. PROBLEMAS La mayoría no es semántico Dependencia de una biblioteca externa Se basa en el viejo modelo de Box Model
17. < d i v c l a s s = " r o w " > < d i v c l a s s = " c o l - x s - 1 2 c o l - s m - 6 c o l - m d - 8 " > . . . < / d i v > < d i v c l a s s = " c o l - x s - 6 c o l - m d - 4 " > . . . < / d i v > < / d i v > < d i v c l a s s = " r o w " > < d i v c l a s s = " c o l - x s - 6 c o l - s m - 4 " > . . . < / d i v > < d i v c l a s s = " c o l - x s - 6 c o l - s m - 4 " > . . . < / d i v > < d i v c l a s s = " c l e a r f i x v i s i b l e - x s - b l o c k " > . . . < / d i v > < d i v c l a s s = " c o l - x s - 6 c o l - s m - 4 " > . . . < / d i v > < / d i v >
18. FLEXBOX
19. ¿POR QUÉ USAR FLEXBOX?
20. Layouts modernos no presente Directo en css Resolver viejos problemas en CSS
22. ¿CÓMO USAR FLEXBOX?
23. MODELO CONTAINER(PARENT)/ITEM(CHILD): . ex-container . ex-item (dentro del container)
24. PROPIEDADES DE FLEXBOX
25. .FLEX-CONTAINER ex-direction: controlar el ujo del contenido horizontalmente y verticalmente ex-wrap: controlar la distribución del contenido en lineas y su dirección justify-content: alinear el contenido con respecto al eje principal (main-axis) align-items: alinear el contenido con respecto a la cruz (cross-axis) align-content: alinear las lineas del container con respecto a la cruz
26. .FLEX-ITEM order: ordenar la presentación de los items ex-grow: factor de crecimiento de un item respecto a los otros items ex-shrink: factor de encogimiento de un item respecto a los otros items ex-basis: determina el tamaño inicial de un item ex: (shorthand) para ex-grow, ex-shrink y ex-basis
27. FLEX-DIRECTION Controlar el ujo del contenido horizontalmente y verticalmente. . f l e x - c o n t a i n e r { f l e x - d i r e c t i o n : r o w | r o w - r e v e r s e | c o l u m n | c o l u m n - r e v e r s }
28. ROW
29. ROW-REVERSE
30. COLUMN
31. COLUMN-REVERSE
32. FLEX-WRAP Controlar la distribución del contenido en lineas y su dirección. . f l e x - c o n t a i n e r { f l e x - w r a p : w r a p | n o w r a p | w r a p - r e v e r s e ; }
33. WRAP
34. NOWRAP
35. WRAP-REVERSE
36. JUSTIFY-CONTENT Alinear el contenido con respecto al eje principal (main-axis). . f l e x - c o n t a i n e r { j u s t i f y - c o n t e n t : f l e x - s t a r t | f l e x - e n d | c e n t e r | s p a c e }
37. FLEX-START
38. FLEX-END
39. CENTER
40. SPACE-BETWEEN
41. SPACE-AROUND
42. ALIGN-ITEMS Alinear el contenido con respecto a la cruz (cross-axis). . f l e x - c o n t a i n e r { a l i g n - i t e m s : s t r e t c h | f l e x - s t a r t | f l e x - e n d | c e n t e r | }
43. STRETCH
44. FLEX-START
45. FLEX-END
46. CENTER
47. BASELINE
48. ALIGN-CONTENT Alinear las lineas del container con respecto a la cruz. . f l e x - c o n t a i n e r { a l i g n - c o n t e n t : s t r e t c h | f l e x - s t a r t | f l e x - e n d | c e n t e r | }
49. STRETCH
50. FLEX-START
51. FLEX-END
52. CENTER
53. SPACE-BETWEEN
54. SPACE-AROUND
55. ORDER Ordenar la presentación de los items. . f l e x - i t e m { o r d e r : - i n t e g e r - ; }
57. FLEX-GROW Factor de crecimiento de un item respecto a los otros items. . f l e x - i t e m { f l e x - g r o w : - n u m b e r - ; }
59. FLEX-SHRINK Factor de encogimiento de un item respecto a los otros items. . f l e x - i t e m { f l e x - s h r i n k : - n u m b e r - ; }
61. FLEX-BASIS Determina el tamaño inicial de un item (si el espacio lo permite). . f l e x - i t e m { f l e x - b a s i s : a u t o | - w i d t h - ; }
63. FLEX (shorthand) para ex-grow, ex-shrink y ex-basis. . f l e x - i t e m { f l e x : n o n e | a u t o | [ f l e x - g r o w f l e x - s h r i n k | f l e x - b a s i s ] }
64. ALIGN-SELF This align-self property allows the default alignment (or the one speci ed by align-items) to be overridden for individual ex items. Refer to align-items explanation for ex container to understand the available values. . f l e x - i t e m { a l i g n - s e l f : a u t o | f l e x - s t a r t | f l e x - e n d | c e n t e r | b a s e l i }
66. EJEMPLOS DE LAYOUTS
77. ... WOOOOWWWW!
78. LINKS
79. FLEXBOX.IO
80. FLEXBOXFROGGY.COM
81. FLEXBOXDEFENSE.COM
82. PHILIPWALTON.GITHUB.IO/SOLVED-BY-FLEXBOX
83. FLEXBOXPATTERNS.COM/HOME
84. WEBKIT-FLEX.ATOMEYE.COM
85. ¿PREGUNTAS?
86. ¡GRACIAS!