Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hola Flexbox

Hola Flexbox

Introduction to flexbox and a little bit of css layout history

Glauber

July 15, 2016
Tweet

More Decks by Glauber

Other Decks in Programming

Transcript

  1. 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 >
  2. BOX MODEL Separa estilo del markup Muy utilizado hoy en

    día Esto permitió a la web que conocemos hoy
  3. . 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 ; }
  4. 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 ; }
  5. 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 ; }
  6. PROBLEMAS La mayoría no es semántico Dependencia de una biblioteca

    externa Se basa en el viejo modelo de Box Model
  7. < 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 >
  8. .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
  9. .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
  10. 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 }
  11. ROW

  12. 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 ; }
  13. 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 }
  14. 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 | }
  15. 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 | }
  16. 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 - ; }
  17. 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 - ; }
  18. 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 - ; }
  19. 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 - ; }
  20. 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 ] }
  21. 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 }