FlexRox

La spécification CSS3 Flexbox rassemble un sacré paquet de bonnes pratiques et répond aux attentes des webdesigners et intégrateurs accumulées depuis de longues années.

Dès aujourd’hui (ou dans un avenir proche selon votre cible), elle constitue sans aucun doute la méthode de positionnement la plus pratique et polyvalente qui n’ait jamais existé en CSS.

Alors, jouable ou pas ? En prod ou ça dépend ? Sommes-nous prêts pour la révolution CSS qu'est Flexbox ?

Transcript

1. FLEXROx by raphaël
2. Crédit photo © Mathieu Drouet raphaël goetter ✓ alsacreations.com ✓ goetter.fr ✓ mydevice.io ✓ knacss.com ✓ @goetter Flexbox ❤
3. flexbox ?
5. distribution ordonnancement alignement flexibilité
6. compatible ?
7. oui ! (IE 10) (Safari 3.1) (Android 2.1) (Chrome 4) (Firefox 2) (Opera 12.1) 97% (Stats Caniuse France)
8. en action !
9. .parent { display: block; }
10. Salade Tomate Oignon Picon bière .enfant { display: block; }
11. 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;
12. distribution
13. distribution flex-direction
14. Salade Tomate Oignon Picon bière .parent { display: flex; }
15. .parent { display: flex; flex-direction: row; } axe principal = horizontal Salade Tomate Oignon Picon bière
16. .parent { display: flex; flex-direction: row-reverse; } Salade Tomate Oignon Picon bière
17. un exemple vite fait ?
18. .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.
19. .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.
20. Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; } axe principal = vertical
21. Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column-reverse; }
22. Salade Tomate Oignon Picon bière .parent { display: flex; } erf, ça déborde
23. Salade Tomate Oignon Picon bière .parent { display: flex; flex-wrap: wrap; }
24. Salade Tomate Oignon Picon bière .parent { display: flex; flex-wrap: wrap-reverse; }
25. ‟Jesus, inventeur officiel de la grande distribution (de pains)… — Chang-Edouard Leclerc, distributeur </distribution>
26. ordonnancement
27. ordonnancement order
28. Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; }
29. Salade Tomate Oignon Picon bière .oignon { order: 1; }
30. Salade Tomate Oignon Picon bière .oignon { order: 1; } .picon-biere { order: -1; }
31. exemple vite fait ?
32. Commencer à bosser important Changer de sous-vêtements important Acheter l’iPhone 6 done Suivre le lapin blanc todo Prendre un dernier picon-bière todo Arrêter de jouer à HearthStone todo Ma todo liste !
33. Commencer à bosser important Changer de sous-vêtements important Acheter l’iPhone 6 done Suivre le lapin blanc todo Prendre un dernier picon-bière todo Arrêter de jouer à HearthStone todo Ma todo liste ! .important { order: -1; } .done { order: 1; }
34. ‟Quand c’est le bordel dans ma chambre, j’invoque les 
 Forces de l’Ordre ! — Luke Skybloguer, stagiaire Jedi </ordonnancement>
35. alignement
 (axe principal)
36. alignement
 (axe principal) justify-content
37. Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; }
38. Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; } justify-content: flex-end;
39. Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; } justify-content: center;
40. Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; } justify-content: space-
 between;
41. Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; } justify-content: space-
 around;
42. alignement
 (axe secondaire)
43. alignement
 (axe secondaire) align-items
44. Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; }
45. .parent { display: flex; flex-direction: column; } align-items: flex-start; Salade Tomate Oignon Picon bière
46. Salade Tomate Oignon Picon bière align-items: flex-end; .parent { display: flex; flex-direction: column; }
47. Salade Tomate Oignon Picon bière align-items: center; .parent { display: flex; flex-direction: column; }
48. Salade Tomate Oignon Picon bière align-items: stretch; .parent { display: flex; flex-direction: column; }
49. .parent { display: flex; flex-direction: column; align-items: stretch; } .oignon { align-self: flex-end; } Salade Tomate Oignon Picon bière
50. .parent { display: flex; flex-direction: column; align-items: stretch; } .oignon { align-self: flex-end; } Salade Tomate Oignon Picon bière .salade,
 .picon { align-self: center; }
51. ‟Ça se saurait si on pouvait centrer verticalement avec margin: auto ! — Jean-Kévin Bayrou, centriste </alignement>
52. t’en as pas marge !?
53. Salade Tomate Oignon Picon bière .parent { display: flex; }
54. Salade Tomate Oignon Picon bière .parent { display: flex; } .picon-bière { margin-left: auto; }
55. Salade Tomate Oignon Picon bière .parent { display: flex; } .oignon{ margin-left: auto; }
56. header content
 lorem schnapsum hopla
 choucroute saucisse footer body { display: flex; flex-direction: column; }
57. header content
 lorem schnapsum hopla
 choucroute saucisse footer body { display: flex; flex-direction: column; } footer { margin-top: auto; }
58. mais en fait…
59. flexbox est bi !
60. Picon bière .parent { display: flex; } .picon-biere { margin: auto; } Codepen or didn’t happen (margin-auto) PICON BIÈRE !
61. flexibilité
62. flexibilité flex-grow, flex-shrink, flex-basis
63. Picon bière .parent { display: flex; } .picon-biere { width: 200px; } flex-grow
64. Picon bière .parent { display: flex; } .picon-biere { width: 200px; flex-grow: 1; } flex-grow
65. Picon bière .parent { display: flex; } .picon-biere { width: 200px; } flex-shrink
66. Picon bière .parent { display: flex; } .picon-biere { width: 200px; flex-shrink: 1; } flex-shrink
67. Picon bière .parent { display: flex; } .picon-biere { flex-basis: 200px; } flex-basis
68. Picon bière .parent { display: flex; } .picon-biere { flex-basis: 200px; flex-grow: 1; } flex-basis
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 = auto) flex: 1 = flex: 1 1 0%
70. Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; }
71. Salade Tomate Oignon Picon bière .oignon { flex: 1; }
72. Salade Tomate Oignon Picon bière .oignon { flex: 1; } .tomate { flex: 1; } 50% 50%
73. Salade Tomate Oignon Picon bière .oignon { flex: 1; } .tomate { flex: 2; } 2/3 1/3
74. exemple vite fait ?
75. accueil société contact picon nav a { flex: 1; } nav a:hover { flex: 2; }
76. accueil société contact picon nav a { flex: 1; } nav a:hover { flex: 2; }
77. Flexbox t’aide à construire des mondes merveilleux ! ON EN A GROW !
78. ‟Non, un « gabarit élastique » n’est pas qu’un acteur de films pour adultes — Clarisse Morgane, contorsionniste </flexibilité>
79. résumé
80. distribution ordonnancement alignement flexibilité
81. distribution ordonnancement alignement flexibilité flex-direction (défaut = row)
82. distribution ordonnancement alignement flexibilité order (défaut = 0)
83. distribution ordonnancement alignement flexibilité justify-content (défaut = flex-start) align-items (défaut = stretch) align-self (défaut = auto)
84. 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 = auto)
85. un template en 5min ?
86. ouais ! header nav content footer
87. header nav content footer body .wrapper
88. header nav content footer body { min-height: 100vh; } IE9+
 #lesavieztu?
89. header nav content footer body { display: flex; flex-direction: column; } min-height: 100vh;
90. header nav content footer body { min-height: 100vh; display: flex; flex-direction: column; } .wrapper { flex: 1; }
91. header nav content footer body { min-height: 100vh; display: flex; flex-direction: column; } .wrapper { flex: 1; } display: flex;
92. header nav content footer body { min-height: 100vh; display: flex; flex-direction: column; } .wrapper { display: flex; flex: 1; } .content { flex: 1; } 6 lignes de CSS
93. .wrapper { display: flex; display: block; } header nav content footer petit écran ? 1 valeur modifiée
94. header nav content footer Flexbox t’aide à construire des mondes merveilleux ! JTM ♥ .wrapper { display: flex; flex-direction: column; } nav { order: 1; } petit écran ?
95. Job’s done Codepen or didn’t happen (template)
96. une navigation responsive ?
98. <nav id="navigation"> <h1> <a href="" data-abbr="RG"> <span>Raphaël Goetter</span> </a> </h1> <a href="">à propos</a> <a href="">blog</a> <a href="">labo</a> <a href="">contact</a> </nav> HTML :
99. @media (max-width: 480px) {
 nav a { display: block; padding: .4em 1em; text-decoration: none; color: #fff; } } CSS (petits écrans) :
101. @media (min-width: 1025px) { nav { display: flex; } } CSS (écrans larges) :
102. @media (min-width: 1025px) { nav { display: flex; justify-content: center; } } CSS (écrans larges) :
103. @media (min-width: 1025px) { nav { display: flex; justify-content: center; align-items: center; } } CSS (écrans larges) :
104. @media (min-width: 1025px) { nav { display: flex; justify-content: center; align-items: center; } nav a:nth-of-type(-n+2) { order: -1; } } CSS (écrans larges) :
105. @media (min-width: 481px) and (max-width: 1024px) { nav { flex-wrap: wrap; } nav h1 { width: 100%; order: -1; } nav > a { width: 50%; } } CSS (écrans moyens) :
106. Job’s done http://goetter.fr/
107. ‟Bien sûr que flexbox vous aide à protéger vos données personnelles sur Facebook ! — Marcello Zuckerberg, Community Manager
108. flexbox, 
 une révolution ?
109. ouais
110. flexbox, le futur du positionnement ?
111. ça dépend®©™
112. sidebar header title article 1 footer article 2 article 3 .container { display: grid; grid-template-areas: "header header header header" "nav title title title" "nav article article article" "footer footer footer footer"; } header { grid-area: header; } nav { grid-area: nav; } .title { grid-area: title; } article {} footer { grid-area: footer; } Grid Layout cdpn.io/xwaoOP
113. flexbox, 
 en prod ?
114. ouais (avec des précautions : Autoprefixer — )
115. (la preuve)
116. twitter.com nytimes.com flickr.com booking.com mappy.com ft.com walmart.com washingtonpost.com usatoday.com mailchimp.com weather.com foxsports.com liberation.fr paris.fr canalplay.com 6play.fr roquefort-societe.com
117. chouette, des démos !
118. ressources
119. http://philipwalton.github.io/solved-by-flexbox/
120. http://jackintheflexbox.tumblr.com/
121. http://the-echoplex.net/flexyboxes/
122. http://www.vincent-valentin.name/articles/le-petit-flexbox-illustre
123. http://www.knacss.com grilles et layout basés sur flexbox
124. https://github.com/philipwalton/flexbugs (et surtout)
125. Flexbox all the things !
126. Avant Flexbox, je n’étais qu’un être surhumain normal… ‟ — Chuck Maurice, chapelier
127. formations.alsacreations.fr
128. merci et @goetter Icônes browsers « Pony »: Safari / Opera by McSadat Chrome by he4rtofcourage IE by McSadat Firefox by NoReasonToHope raphaël BISOU ♥