Flexbox Révolution

1 014 vues

Publié le

Flexbox représente la nouvelle génération de positionnement CSS3 aux multiples facettes, prêt à l'emploi et au bon goût de Responsive Web Design. Pensé pour faciliter la vie du webdesigner et pour oublier nos cauchemars de centrages verticaux, de hauteurs identiques, de fluidité naturelle, de pieds de pages collés en bas (oui parce qu'on n'est pas tous fétichistes), Flexbox est aujourd'hui supporté par tous les navigateurs récents... même Internet Explorer. Alors, jouable ou pas ? En prod ou ça dépend ? Sommes-nous prêts pour la révolution CSS qu'est Flexbox ?

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

Aucun téléchargement
Vues
Nombre de vues
1 014
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8
Actions
Partages
0
Téléchargements
16
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Flexbox Révolution

  1. 1. by 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. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  row;   } axe principal = horizontal
  30. 30. SaladeTomateOignonPicon bière .parent  {   display:  flex;   flex-­‐direction:  row-­‐reverse;   }
  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. mais en fait…
  65. 65. flexbox est bi !
  66. 66. Picon bière .parent  {   display:  flex;   } .picon-­‐biere  {   margin:  auto;   } Codepen or didn’t happen (margin-auto) PICON BIÈRE !
  67. 67. flexibilité
  68. 68. flexibilité flex
  69. 69. 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)
  70. 70. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   }
  71. 71. Salade Tomate Oignon Picon bière .oignon  {   flex:  1;   }
  72. 72. Salade Tomate Oignon Picon bière .oignon  {   flex:  1;   } .tomate  {   flex:  1;   } 50% 50%
  73. 73. Salade Tomate Oignon Picon bière .oignon  {   flex:  1;   } .tomate  {   flex:  2;   } 2/3 1/3
  74. 74. exemple vite fait ?
  75. 75. accueil société contact picon nav  a  {   flex:  1;   } nav  a:hover  {   flex:  2;   }
  76. 76. accueil société contact picon nav  a  {   flex:  1;   } nav  a:hover  {   flex:  2;   }
  77. 77. ‟Non, un « gabarit élastique » n’est pas qu’un acteur de films pour adultes — Clarisse Morgane, contorsionniste </flexibilité>
  78. 78. résumé
  79. 79. distribution ordonnancement alignement flexibilité
  80. 80. distribution ordonnancement alignement flexibilité flex-­‐direction  (défaut  =  row)
  81. 81. distribution ordonnancement alignement flexibilité order  (défaut  =  0)
  82. 82. distribution ordonnancement alignement flexibilité justify-­‐content  (défaut  =  flex-­‐start) align-­‐items  (défaut  =  stretch) align-­‐self  (défaut  =  auto)
  83. 83. 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)
  84. 84. un template en 5min
  85. 85. ouais
  86. 86. header nav content footer body .wrapper
  87. 87. header nav content footer body  {   min-­‐height:  100vh;   } IE9+
 #lesavieztu?
  88. 88. header nav content footer body  {   display:  flex;   flex-­‐direction:  column;   flex-­‐wrap:  wrap;   } min-­‐height
  89. 89. header nav content footer body min-­‐height display flex-­‐direction flex-­‐wrap } .wrapper  {   flex:  1;   }
  90. 90. header nav content footer body min-­‐height display flex-­‐direction flex-­‐wrap } .wrapper flex } display:  flex;
  91. 91. header nav content footer body min-­‐height display flex-­‐direction flex-­‐wrap } .wrapper display flex } .content  {   flex:  1;   }
  92. 92. .wrapper  {   display:  flex;   display:  block;   } header nav content footer petit écran ?
  93. 93. header nav content footer Flexbox t’aide à construire des mondes merveilleux ! JTM ♥ .wrapper  {   display:  flex;   flex-­‐direction:  column;   } nav  {   order:  1;   } petit écran ?
  94. 94. Job’s done Codepen or didn’t happen (template)
  95. 95. ‟Bien sûr que flexbox vous aide à protéger vos données personnelles sur Facebook ! — Marcello Zuckerberg, Community Manager
  96. 96. bonus
  97. 97. BFC !
  98. 98. un float ne déborde pas d’un « flex-container » un float ne déborde pas d’un « flex-item » un « flex-container » ne s’écoule pas autour d’un float
  99. 99. Salade .parent  {   display:  block;   } .salade  {   display:  block;   }
  100. 100. Salade .parent  {   display:  block;   } .salade  {   display:  block;   float:  left;   }
  101. 101. Salade .parent  {   display:  flex;   } .salade  {   display:  block;   float:  left;   } un float ne déborde pas d’un « flex-container »
  102. 102. nav  {   display:  block;   } .content  {   display:  block;   } nav content
  103. 103. contentnav nav  {   float:  left;   } .content  {   display:  block;   }
  104. 104. un « flex-container » ne s’écoule pas autour d’un float nav nav  {   float:  left;   } .content  {   display:  flex;   } content Codepen or didn’t happen (BFC)
  105. 105. flexbox, 
 une révolution ?
  106. 106. ouais
  107. 107. flexbox, le futur du positionnement ?
  108. 108. ça dépend®©™
  109. 109. flexbox, 
 en prod ?
  110. 110. ouais (avec des précautions : Autoprefixer ♥ )
  111. 111. ressources
  112. 112. http://philipwalton.github.io/solved-by-flexbox/http://flexboxgrid.com/http://the-echoplex.net/flexyboxes/http://jackintheflexbox.tumblr.com/
  113. 113. Flexbox all the things !
  114. 114. merci et @goetter Icônes browsers « Pony »: Safari / Opera by McSadat Chrome by he4rtofcourage IE by McSadat Firefox by NoReasonToHope raphaël BISOU ♥

×