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

Desarrolla aplicaciones web flexibles con Flexbox

Desarrolla aplicaciones web flexibles con Flexbox

Descubre la nueva especificación CSS con la que posicionar los elementos de tu web de forma rápida y sencilla.

6c68edbaa40e50a0420ee1c125d17189?s=128

Imanol Terán

February 22, 2016
Tweet

Transcript

  1. Desarrolla aplicaciones web flexibles con FLEXBOX Imanol Terán Maruri -

    @itermar
  2. ¿QUIÉN SOY?

  3. ¿QUIÉN SOY? ๏ Desarrollador Frontend ๏ Desarrollador iOS ๏ Formador

    imanolteran.com @itermar itermar@gmail.com
  4. widdiapps.com @widdiapps info@widdiapps.com ๏ Web ๏ iOS ๏ E-Commerce ๏

    Publicaciones Digitales ๏ Formación ¿QUIÉN SOY?
  5. PROGRAMA ๏ Introducción ๏ Tablas / Modelo de cajas /

    Rejillas / Flexbox ๏ Propiedades y compatibilidad con navegadores ๏ Ejemplos y casos de uso ๏ Referencias y documentación ๏ Frameworks que utilizan Flexbox ๏ Ejercicios Prácticos
  6. INTRODUCCIÓN ¿Cómo maquetamos nuestras web?

  7. Evolución Table Box Model Grid Systems Flexbox

  8. TABLE

  9. Table ๏ Surgió en 1995 con la especificación HTML 3.0

    ๏ Se “hizo fuerte” con la versión HTML 3.2 ๏ El “tag” <table> creado para crear layouts, además de mostrar datos en tablas
  10. Table - Características ๏ <table border=0> ๏ <body bottomMargin=0 leftMargin=0>

    ๏ <td valign=top> ๏ <table cellspacing=10 cellpadding=10> ๏ <td colspan=3 rowspan=1>
  11. Table - Problemas ๏ Estilo, contenido y marcado juntos ๏

    Accesibilidad ๏ Código poco legible
  12. BOX MODEL

  13. Box Model ๏ Surgió en 1996 con CSS 1 y

    HTML 3.2 ๏ Empezamos a hablar del concepto CSS: separar estilo y marcado ๏ Aparecen elementos de bloque: <div>, <h1>, <p>…
  14. Box Model - Evolución I ๏ width, height ๏ display,

    float ๏ margin, padding y border
  15. Box Model - Evolución II ๏ position ๏ top, bottom,

    left, right ๏ max-width, min-width, max-height, min-height
  16. Box Model - Fin de las tablas ๏ <table> :

    para mostrar datos en tablas ๏ box model : layouts con CSS
  17. Box Model - Evolución III ๏ box-sizing

  18. None
  19. None
  20. Box Model - Problemas ๏ Alinear objetos en vertical ๏

    Posicionar unas cajas junto a otras (float, inline o inline-block) ๏ Clearfix, clear:both ๏ Altura automática de las cajas ๏ …y unos cuantos más
  21. GRID SYSTEMS

  22. Grid Systems ๏ Comienzan en 2007 con Blueprint ๏ Nacen

    para solucionar problemas de layout y crear sistema de columnas estándar ๏ 12, 16 o 24 columnas ๏ Abstracción del modelo de cajas ๏ Éxito en 2009, con 960.gs
  23. Antes de GRID 1 2 3

  24. Después de GRID 1 2 3 <div class=“container clearfix”> <div

    class=“span-8”>1</div> <div class=“span-8”>2</div> <div class=“span-8 last”>3</div> </div>
  25. Tipos de Grid ๏ Columna ๏ Fluída / Fija ๏

    Semántica / No-semántica ๏ Responsive ๏ … y más
  26. Ejemplos ๏ Blueprint: http://www.blueprintcss.org ๏ 960.gs: http://960.gs ๏ Bootstrap: http://getbootstrap.com

    ๏ Foundation: http://foundation.zurb.com
  27. FLEXBOX

  28. Flexbox ๏ 19 años sin especificación CSS concreta para trabajar

    con layout ๏ W3C empieza con ello en 2009 ๏ Ha habido varias sintaxis durante el proceso
  29. Flexbox - Estado actual ๏ Soporte a navegadores está mejorando

    ๏ Muchos frameworks lo están incluyendo
  30. Flexbox Consiste, principalmente, en proporcionar al contenedor la habilidad para

    cambiar la anchura y altura de los elementos que contiene, con el fin de rellenar de la forma más eficiente posible el espacio en blanco y prevenir los desbordes
  31. Propiedades y compatibilidad con Navegadores

  32. ¿Qué podemos controlar con Flexbox? ๏ Orientación de los elementos

    ๏ Espacio entre elementos ๏ Orden entre elementos
  33. <div class=“container”> <div class=“item”>1</div> <div class=“item”>2</div> <div class=“item”>3</div> </div> Empezando

    con Flexbox
  34. Sin Flexbox 1 2 3

  35. .container { display: flex; } Empezando con Flexbox

  36. Con Flexbox 1 2 3

  37. Propiedades Flexbox ๏ display ๏ flex-direction ๏ flex-wrap ๏ flex-flow

    ๏ justify-content ๏ align-items ๏ align-content ๏ order ๏ flex-grow ๏ flex-shrink ๏ flex-basis ๏ align-self Contenedor Items
  38. None
  39. Available space = (container size - flex-basis siblings total) Grow

    unit = (Available space / Sum Grow siblings total) Flex item size = (Flex basis + (Grow Unit * num)) Calcular espacio disponible http://chriswrightdesign.com/experiments/flexbox-adventures/
  40. Contenedor

  41. flex-direction

  42. ๏ row (default) / row-reverse ๏ column / column-reverse flex-direction

  43. flex-wrap

  44. ๏ nowrap (default) ๏ wrap ๏ wrap-reverse flex-wrap

  45. flex-flow +

  46. ๏ row nowrap (default) ๏ row wrap flex-flow

  47. justify-content

  48. ๏ flex-start (default) ๏ flex-end ๏ center ๏ space-between ๏

    space-around justify-content
  49. align-items

  50. ๏ stretch (default) ๏ flex-start ๏ flex-end ๏ center ๏

    baseline ๏ space-around align-items
  51. align-content

  52. ๏ stretch (default) ๏ flex-start ๏ flex-end ๏ center ๏

    space-between ๏ space-around align-content
  53. Items

  54. order

  55. order .item { order: <integer>; }

  56. flex-grow

  57. flex-grow .item { flex-grow: <number>; }

  58. flex-shrink .item { flex-shrink: <number>; }

  59. flex-basis .item { flex-basis: <length> | auto; }

  60. flex .item { flex: 0 1 auto; /* default */

    } flex-grow + flex-shrink + flex-basis
  61. align-self

  62. align-self ๏ auto (default) ๏ flex-start ๏ flex-end ๏ center

    ๏ baseline ๏ stretch
  63. http://caniuse.com/#feat=flexbox Compatibilidad con navegadores

  64. Internet Explorer 11

  65. Edge 12

  66. Firefox 41

  67. Chrome 45

  68. Safari 8

  69. Opera 32

  70. iOS Safari 9

  71. Opera Mini 8

  72. Android browser 44

  73. Android Chrome 44

  74. None
  75. Ejemplos y casos de uso

  76. Layouts de ejemplo ๏ Ejemplo 1: http://codepen.io/_Billy_Brown/full/ACamb/ ๏ Ejemplo 2:

    http://codepen.io/dudleystorey/full/umrnE/ ๏ Ejemplo 3: http://codepen.io/HugoGiraudel/pen/qIAwr ๏ Ejemplo 4: http://codepen.io/HugoGiraudel/pen/pkwqH ๏ Ejemplo 5: http://callmenick.com/_development/flexbox-examples/index.html
  77. Referencias y Documentación

  78. ๏ http://www.w3.org/TR/css3-flexbox/ ๏ https://developer.mozilla.org/en-US/docs/Web/CSS/ CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ๏ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ๏ http://apps.workflower.fi/css-cheats/?name=flexbox ๏

    http://zomigi.com/blog/flexbox-syntax-for-ie-10/ ๏ https://github.com/10up/flexibility Referencias
  79. ๏ http://philipwalton.github.io/solved-by-flexbox/ ๏ http://cssflexbox.com ๏ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ flex- wrap ๏ https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-

    properties ๏ https://github.com/philipwalton/flexbugs ๏ http://heydesigner.com/css-flexbox/ Referencias
  80. ๏ http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ ๏ https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align- itemscenter-overflow-their-container Problemas actuales

  81. Ejercicios prácticos a jugaaaaar

  82. ๏ http://bennettfeely.com/flexplorer/ ๏ http://the-echoplex.net/flexyboxes/ ๏ http://flexboxin5.com ๏ https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/ demos/ ๏

    http://flexboxfroggy.com Ejercicios Prácticos
  83. GRACIAS Imanol Terán Maruri @itermar itermar@gmail.com