Hola Flexbox

Hola Flexbox

Introduction to flexbox and a little bit of css layout history

5716ab9479c715eecc6a9a7f2139da75?s=128

Glauber Ramos

July 15, 2016
Tweet

Transcript

  1. 3.
  2. 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 >
  3. 6.
  4. 7.

    BOX MODEL Separa estilo del markup Muy utilizado hoy en

    día Esto permitió a la web que conocemos hoy
  5. 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 ; }
  6. 9.
  7. 10.
  8. 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 ; }
  9. 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 ; }
  10. 14.
  11. 15.
  12. 16.

    PROBLEMAS La mayoría no es semántico Dependencia de una biblioteca

    externa Se basa en el viejo modelo de Box Model
  13. 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 >
  14. 18.
  15. 21.
  16. 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
  17. 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
  18. 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 }
  19. 28.

    ROW

  20. 30.
  21. 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 ; }
  22. 33.
  23. 34.
  24. 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 }
  25. 38.
  26. 39.
  27. 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 | }
  28. 43.
  29. 45.
  30. 46.
  31. 47.
  32. 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 | }
  33. 49.
  34. 51.
  35. 52.
  36. 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 - ; }
  37. 56.
  38. 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 - ; }
  39. 58.
  40. 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 - ; }
  41. 60.
  42. 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 - ; }
  43. 62.
  44. 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 ] }
  45. 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 }
  46. 65.
  47. 67.
  48. 68.
  49. 69.
  50. 70.
  51. 71.
  52. 72.
  53. 73.
  54. 74.
  55. 75.
  56. 76.
  57. 78.