FlexRox

740 vues

Publié le

Intervention de Raphaël GOETTER lors de la conférence WebDesign #2

Publié dans : Design
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
740
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

FlexRox

  1. 1. FLEXROxby raphaël
  2. 2. Crédit photo © Mathieu Drouet raphaël goetter ✓ alsacreations.com ✓ goetter.fr ✓ mydevice.io ✓ knacss.com ✓ @goetter
  3. 3. flexbox ?
  4. 4. distribution ordonnancement alignement flexibilité
  5. 5. compatible ?
  6. 6. oui ! (IE 10) (Safari 3.1)(Android 2.1) (Chrome 4) (Firefox 2) (Opera 12.1) (Stats Caniuse France)
  7. 7. standard ?
  8. 8. presque !
  9. 9. erf !
  10. 10. OK, je fais quoi avec ?
  11. 11. Picon bière mais aussi…
  12. 12. nav content
  13. 13. nav content
  14. 14. nav content mais aussi…
  15. 15. je suis un pied toujours en bas
  16. 16. je suis un pied toujours en bas
  17. 17. je suis un pied toujours en bas mais aussi…
  18. 18. moi je suis un gabarit je prends toute la hauteur de page je suis fluide et responsive et réalisé en quelques minutes
  19. 19. moi je suis un gabarit je prends toute la hauteur de page je suis fluide et responsive et réalisé en quelques minutes mais aussi…
  20. 20. avec des hauteurs identiques je suis une grille en flexbox certains de mes éléments peuvent occuper plusieurs emplacements et une gouttière définie et je suis fluide et responsive hop, moi je suis calé à droite ! plutôt chouette, non ? mais aussi…
  21. 21. kiwi.pdf tomate.docx oignon.pptx salade.pdf picon.docx bière.pptx kiwi.pdf tomate.docx oignon.pptx salade.pdf picon.docx bière.pptx mais aussi plein d’autres trucs !
  22. 22. en action !
  23. 23. .parent  {   display:  block;   }
  24. 24. Salade Tomate Oignon Picon bière .enfant  {   display:  block;   }
  25. 25. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   } « flex-items » « flex-container » display:  block;   display:  inline-­‐block;   display:  table;   float:  left;   display:  none;   position:  absolute;
  26. 26. distribution
  27. 27. distribution flex-­‐direction
  28. 28. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   }
  29. 29. .parent  {   display:  flex;   flex-­‐direction:  row;   } axe principal = horizontal Salade Tomate Oignon Picon bière
  30. 30. .parent  {   display:  flex;   flex-­‐direction:  row-­‐reverse;   } SaladeTomateOignonPicon bière
  31. 31. exemple vite fait ?
  32. 32. .parent  {   display:  flex;   flex-­‐direction:  row;   } Le module de positionnement CSS3 « Flexbox » introduit un tout nouveau système de positionnement (via la propriété display comme de coutume) permettant, entre autres, de : • distribuer les éléments aussi bien en lignes qu’en blocs • contrôler la gestion des espaces disponibles ; • contrôler les alignements verticaux et horizontaux ; • agencer les éléments sans tenir compte du DOM. Rien que ce dernier point démontre à quel point ce module est avancé par rapport à tout ce qu’on a connu.
  33. 33. .parent  {   display:  flex;   flex-­‐direction:  row-­‐reverse;   } Le module de positionnement CSS3 « Flexbox » introduit un tout nouveau système de positionnement (via la propriété display comme de coutume) permettant, entre autres, de : • distribuer les éléments aussi bien en lignes qu’en blocs ; • contrôler la gestion des espaces disponibles ; • contrôler les alignements verticaux et horizontaux ; • agencer les éléments sans tenir compte du DOM. Rien que ce dernier point démontre à quel point ce module est avancé par rapport à tout ce qu’on a connu.
  34. 34. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   } axe principal = vertical
  35. 35. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column-­‐reverse;   }
  36. 36. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   } erf, ça déborde
  37. 37. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐wrap:  wrap;   }
  38. 38. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐wrap:  wrap-­‐reverse;   }
  39. 39. ‟Jesus, inventeur officiel de la grande distribution (de pains)… — Chang-Edouard Leclerc, distributeur </distribution>
  40. 40. ordonnancement
  41. 41. ordonnancement order
  42. 42. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   }
  43. 43. Salade Tomate Oignon Picon bière .oignon  {   order:  1;   }
  44. 44. Salade Tomate Oignon Picon bière .oignon  {   order:  1;   } .picon-­‐biere  {   order:  -­‐1;   }
  45. 45. exemple vite fait ?
  46. 46. Commencer à bosserimportant Changer de sous-vêtementsimportant Acheter l’iPhone 6done Suivre le lapin blanctodo Prendre un dernier picon-bièretodo Arrêter de jouer à HearthStonetodo Ma todo liste !
  47. 47. Commencer à bosserimportant Changer de sous-vêtementsimportant Acheter l’iPhone 6done Suivre le lapin blanctodo Prendre un dernier picon-bièretodo Arrêter de jouer à HearthStonetodo Ma todo liste ! .important  {   order:  -­‐1;   } .done  {   order:  1;   }
  48. 48. ‟Quand c’est le bordel dans ma chambre, j’invoque les 
 Forces de l’Ordre ! — Luke Skybloguer, stagiaire Jedi </ordonnancement>
  49. 49. alignement
 (axe principal)
  50. 50. alignement
 (axe principal) justify-­‐content
  51. 51. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   }
  52. 52. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   } justify-­‐content:  flex-­‐end;  
  53. 53. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   } justify-­‐content:  center;  
  54. 54. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   } justify-­‐content:  space-­‐
 between;  
  55. 55. alignement
 (axe secondaire)
  56. 56. alignement
 (axe secondaire) align-­‐items
  57. 57. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   }
  58. 58. .parent  {   display:  flex;   flex-­‐direction:  column;   } align-­‐items:  flex-­‐start;   Salade Tomate Oignon Picon bière
  59. 59. Salade Tomate Oignon Picon bière align-­‐items:  flex-­‐end;   .parent  {   display:  flex;   flex-­‐direction:  column;   }
  60. 60. Salade Tomate Oignon Picon bière align-­‐items:  center;   .parent  {   display:  flex;   flex-­‐direction:  column;   }
  61. 61. Salade Tomate Oignon Picon bière align-­‐items:  stretch;   .parent  {   display:  flex;   flex-­‐direction:  column;   }
  62. 62. .parent  {   display:  flex;   flex-­‐direction:  column;   align-­‐items:  stretch;   } .oignon  {   align-­‐self:  flex-­‐end;   } Salade Tomate Oignon Picon bière
  63. 63. ‟Ça se saurait si on pouvait centrer verticalement avec margin: auto ! — Jean-Kévin Bayrou, centriste </alignement>
  64. 64. t’en as pas marge !?
  65. 65. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   }
  66. 66. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   }   .picon-­‐bière  {   margin-­‐left:  auto;   }
  67. 67. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   }   .oignon{   margin-­‐left:  auto;   }
  68. 68. header content
 lorem schnapsum hopla
 choucroute saucisse footer body  {   display:  flex;   flex-­‐direction:  column;   }
  69. 69. header content
 lorem schnapsum hopla
 choucroute saucisse footer body  {   display:  flex;   flex-­‐direction:  column;   }   footer  {   margin-­‐top:  auto;   }
  70. 70. mais en fait…
  71. 71. flexbox est bi !
  72. 72. Picon bière .parent  {   display:  flex;   } .picon-­‐biere  {   margin:  auto;   } Codepen or didn’t happen (margin-auto) PICON BIÈRE !
  73. 73. flexibilité
  74. 74. flexibilité flex-­‐grow,  flex-­‐shrink,  flex-­‐basis
  75. 75. Picon bière .parent  {   display:  flex;   }   .picon-­‐biere  {   width:  200px;   } flex-grow
  76. 76. Picon bière .parent  {   display:  flex;   }   .picon-­‐biere  {   width:  200px;   flex-­‐grow:  1;   } flex-grow
  77. 77. Picon bière .parent  {   display:  flex;   }   .picon-­‐biere  {   width:  200px;   } flex-shrink
  78. 78. Picon bière .parent  {   display:  flex;   }   .picon-­‐biere  {   width:  200px;   flex-­‐shrink:  1;   } flex-shrink
  79. 79. Picon bière .parent  {   display:  flex;   }   .picon-­‐biere  {   flex-­‐basis:  200px;   } flex-basis
  80. 80. Picon bière .parent  {   display:  flex;   }   .picon-­‐biere  {   flex-­‐basis:  200px;   flex-­‐grow:  1;   } flex-basis
  81. 81. flex flex-­‐grow  
 
 capacité  à  s’élargir   selon  l’espace   restant
 
 (défaut  =  0) flex-­‐shrink  
 
 capacité  à  se   contracter  selon   l’espace  restant
 
 (défaut  =  1) flex-­‐basis  
 
 dimension  par  défaut   avant  que  l’espace   ne  soit  distribué
 
 (défaut  =  main-­‐size  =   auto)
  82. 82. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   }
  83. 83. Salade Tomate Oignon Picon bière .oignon  {   flex:  1;   }
  84. 84. Salade Tomate Oignon Picon bière .oignon  {   flex:  1;   } .tomate  {   flex:  1;   } 50% 50%
  85. 85. Salade Tomate Oignon Picon bière .oignon  {   flex:  1;   } .tomate  {   flex:  2;   } 2/3 1/3
  86. 86. exemple vite fait ?
  87. 87. accueil société contact picon nav  a  {   flex:  1;   } nav  a:hover  {   flex:  2;   }
  88. 88. accueil société contact picon nav  a  {   flex:  1;   } nav  a:hover  {   flex:  2;   }
  89. 89. flexibilité à tous les étages
  90. 90. enfant 2
 lorem schnapsum hopla
 choucroute saucisse .parent  {   display:  flex;   }   .enfant-­‐1,
 .enfant-­‐2  {   width:  50%;   } enfant 1
 lorem schnapsum hopla
 choucroute saucisse
 picon knack
  91. 91. enfant 2
 lorem schnapsum hopla
 choucroute saucisse .parent  {   display:  flex;   }   .enfant-­‐1,
 .enfant-­‐2  {   width:  50%;   } enfant 1
 lorem schnapsum hopla
 choucroute saucisse
 picon knack .enfant-­‐1  {   margin-­‐right:  50px;   }
  92. 92. enfant 2
 lorem schnapsum hopla
 choucroute saucisse .parent  {   display:  flex;   }   .enfant-­‐1,
 .enfant-­‐2  {   width:  50%;   } enfant 1
 lorem schnapsum hopla
 choucroute saucisse
 picon knack .enfant-­‐1  {   margin-­‐right:  250px;   } (et ouais parce que
 par défaut, flex-shrink vaut 1)
  93. 93. ‟Non, un « gabarit élastique » n’est pas qu’un acteur de films pour adultes — Clarisse Morgane, contorsionniste </flexibilité>
  94. 94. résumé
  95. 95. distribution ordonnancement alignement flexibilité
  96. 96. distribution ordonnancement alignement flexibilité flex-­‐direction  (défaut  =  row)
  97. 97. distribution ordonnancement alignement flexibilité order  (défaut  =  0)
  98. 98. distribution ordonnancement alignement flexibilité justify-­‐content  (défaut  =  flex-­‐start) align-­‐items  (défaut  =  stretch) align-­‐self  (défaut  =  auto)
  99. 99. distribution ordonnancement alignement flexibilité flex  (défaut  =  variable  selon  grow/shrink/basis) flex-­‐grow  (défaut  =  0) flex-­‐shrink  (défaut  =  1) flex-­‐basis  (défaut  =  main-­‐size  =  auto)
  100. 100. un template en 5min
  101. 101. ouais
  102. 102. header nav content footer body .wrapper
  103. 103. header nav content footer body  {   min-­‐height:  100vh;   } IE9+
 #lesavieztu?
  104. 104. header nav content footer body  {   display:  flex;   flex-­‐direction:  column;   flex-­‐wrap:  wrap;   } min-­‐height
  105. 105. header nav content footer body min-­‐height display flex-­‐direction flex-­‐wrap } .wrapper  {   flex:  1;   }
  106. 106. header nav content footer body min-­‐height display flex-­‐direction flex-­‐wrap } .wrapper flex } display:  flex;
  107. 107. header nav content footer body min-­‐height display flex-­‐direction flex-­‐wrap } .wrapper display flex } .content  {   flex:  1;   }
  108. 108. .wrapper  {   display:  flex;   display:  block;   } header nav content footer petit écran ?
  109. 109. header nav content footer Flexbox t’aide à construire des mondes merveilleux ! JTM ♥ .wrapper  {   display:  flex;   flex-­‐direction:  column;   } nav  {   order:  1;   } petit écran ?
  110. 110. Job’s done Codepen or didn’t happen (template)
  111. 111. ‟Bien sûr que flexbox vous aide à protéger vos données personnelles sur Facebook ! — Marcello Zuckerberg, Community Manager
  112. 112. flexbox, 
 une révolution ?
  113. 113. ouais
  114. 114. flexbox, le futur du positionnement ?
  115. 115. ça dépend®©™
  116. 116. flexbox, 
 en prod ?
  117. 117. ouais (avec des précautions : Autoprefixer ♥ )
  118. 118. (la preuve)
  119. 119. ressources
  120. 120. http://philipwalton.github.io/solved-by-flexbox/http://flexboxgrid.com/http://the-echoplex.net/flexyboxes/http://jackintheflexbox.tumblr.com/
  121. 121. https://github.com/philipwalton/flexbugs (et surtout)
  122. 122. Flexbox all the things !
  123. 123. merci et @goetter Icônes browsers « Pony »: Safari / Opera by McSadat Chrome by he4rtofcourage IE by McSadat Firefox by NoReasonToHope raphaël BISOU ♥

×