Flexbox, place à la gueule de bois !

Vous commencez votre premier projet en Flexbox ? Bravo, c'est la fête !

On vous avait convaincu que Flexbox était "cool", qu'il allait révolutionner le webdesign. On vous avait carrément vendu du rêve.

Du coup, vous twittez partout que float est mort, que vous aimez à nouveau CSS, vous vous lâchez, écrivez EN CAPSLOCK, envoyez des gifs de licornes à vos collègues et avez vidé votre deuxième bouteille de Dark Dog.

Puis bizarrement, vous commencez à avoir un peu mal aux cheveux. Ça tourne un peu parfois. Vous vous surprenez à vous complaindre de bugs navigateurs, de comportements incohérents.
Nan mais sérieusement, pourquoi des fois ça marche et des fois pas ?! Et pourquoi mes trucs responsive sont tout cassés maintenant ?! Ah oui, et pourquoi flex-grow: 1 c'est pas pareil que flex: 1 ??

Et là, paf ! C'est la gueule de bois. Imparable. Avec les nausées et tout ce qui va avec. Mauvais trip. Envie de retourner intégrer des newsletters ou de se remettre à Bootstrap.

Découvrons ensemble comment nous en remettre en selle, franchissons un nouveau cap avec Flexbox et débarrassons de cette migraine.

Transcript

1. PLACE À LA FLEXBOX GUEULE DE BOIS !
2. Source : Nick Marchenko (Twitter) FLEXBOX
 DANS TES RÊVES : FLEXBOX
 DANS TON NAVIGATEUR:
3. Raphaël Goetter
4. FLEXBOX CHEAT SHEET parce que tu connais toutes les propriétés, toi ?
5. FLEX CONTAINER 1/2 display: flex; display: inline-flex; flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; justify-content: flex-start; justify-content: center; justify-content: flex-end; justify-content: space-between; justify-content: space-around; BONUS : 
 flex-flow → flex-direction + flex-wrap
6. align-items: flex-start; align-items: center; align-items: flex-end; align-items: stretch; align-items: baseline; align-content: flex-start; align-content: center; align-content: flex-end; align-content: space-between; align-content: space-around; align-content: stretch; FLEX CONTAINER 2/2
7. FLEX ITEM order: 0; order: 1; order: -1; source : http://apps.workflower.fi/css-cheats/?name=flexbox align-self: auto; align-self: flex-start; align-self: center; align-self: flex-end; align-self: baseline; align-self: stretch; justify-self ? → nope flex-grow: 0; flex-grow: 1; flex-shrink: 0; flex-shrink: 1; flex-basis: auto; flex-basis: 50%;
8. QUIZ ! quelle est la valeur par défaut de flex ? flex: auto; flex: 1; flex: 0; flex: 0 1 0; flex: 1 1 auto; flex: 0 1 auto;
9. PRIORITÉS COMPLEXES Je suis flex-wrap, dois-je laisser passer flex-shrink ?
10. width flex-basis .flex-item { flex-basis: 500px; width: 250px; }
11. FIGHT ! width flex-basis
12. width flex-basis FLEX-BASIS WINS !
13. flex-basis: auto; width: valeur; flex-basis: valeur; flex-grow | flex-shrink flex-wrap max-width min-width PRIORITÉS DANS FLEXBOX
14. CONCRÈTEMENT ?
15. Salade Tomate Oignon Picon bière .flex-container { display: flex; }
16. Salade Tomate Oignon Picon bière .flex-container { display: flex; } .flex-item { width: 50% } flex-basis: auto; width: valeur; flex-basis: valeur; flex-grow | flex-shrink flex-wrap max-width min-width
17. .flex-container { display: flex; } .flex-item { width: 150% } Salade Tomate Oignon Picon bière flex-basis: auto; width: valeur; flex-basis: valeur; flex-grow | flex-shrink flex-wrap max-width min-width
18. flex-basis: auto; width: valeur; flex-basis: valeur; flex-grow | flex-shrink flex-wrap max-width min-width .flex-container { display: flex; flex-wrap: wrap; } .flex-item { width: 150% } Salade Tomate Oignon Picon bière
19. SUPER « une question de taille… » source image QUIZ !
20. .flex-item { flex: 1; width: 250px; } 1000px TAILLE 1
21. .flex-item { flex: 1; width: 250px; } 1000PX flex-grow le force à remplir l’espace restant 1000px TAILLE 1
22. .flex-item { flex-basis: 500px; width: 250px; } 1000px TAILLE 2
23. .flex-item { flex-basis: 500px; width: 250px; } 500PX flex-basis l’emporte sur width 1000px TAILLE 2
24. .flex-item { flex-basis: auto; width: 250px; } 1000px TAILLE 3
25. .flex-item { flex-basis: auto; width: 250px; } 250PX width l’emporte sur flex-basis: auto 1000px TAILLE 3
26. .flex-item { flex-basis: 500px; width: 250px; min-width: 750px; } 1000px TAILLE 4
27. 750PX .flex-item { flex-basis: 500px; width: 250px; min-width: 750px; } min-width l’emporte sur width et flex-basis 1000px TAILLE 4
28. .flex-item { flex-basis: 500px; flex-shrink: 1; min-width: 1250px; } 1000px TAILLE 5
29. 1250PX .flex-item { flex-basis: 500px; flex-shrink: 1; min-width: 1250px; } min-width l’emporte systématiquement 1000px TAILLE 5
30. .flex-item { flex-basis: 0; flex-shrink: 0; width: 250px; } 1000px TAILLE 6
31. 0 .flex-item { flex-basis: 0; flex-shrink: 0; width: 250px; } ⚠ il prend au-moins la taille minimale du contenu 1000px TAILLE 6
32. 1000px .flex-item { width: 500px; flex-basis: 1250px; min-width: 750px; flex-shrink: 0; flex-grow: 1; } TAILLE 7
33. 1250PX flex-basis (et min-width) s’appliquent .flex-item { width: 500px; flex-basis: 1250px; min-width: 750px; flex-shrink: 0; flex-grow: 1; } 1000px TAILLE 7
34. EN DÉTAIL : FLEX-GROW, FLEX-SHRINK, LE CALCUL SAVANT
35. FLEX-GROW facteur d’agrandissement si espace restant dans le flex-container Salade Tomate Oignon .salade { flex-grow: 0; } .tomate { flex-grow: 0; } .oignon { flex-grow: 0; }
36. FLEX-GROW facteur d’agrandissement si espace restant dans le flex-container Salade Tomate Oignon .salade { flex-grow: 0; } .tomate { flex-grow: 1; } .oignon { flex-grow: 0; }
37. facteur d’agrandissement si espace restant dans le flex-container Salade Tomate Oignon .salade { flex-grow: 1; } .tomate { flex-grow: 2; } .oignon { flex-grow: 0; } FLEX-GROW
38. facteur de rétrécissement si espace négatif dans le flex-container Salade Tomate Oignon * {flex-basis: 500px;} .salade { flex-shrink: 0; } .tomate { flex-shrink: 0; } .oignon { flex-shrink: 0; } FLEX-SHRINK
39. facteur de rétrécissement si espace négatif dans le flex-container * {flex-basis: 500px;} .salade { flex-shrink: 0; } .tomate { flex-shrink: 1; } .oignon { flex-shrink: 0; } Salade Tomate Oignon FLEX-SHRINK
40. facteur de rétrécissement si espace négatif dans le flex-container * {flex-basis: 500px;} .salade { /* rien */
 } .tomate { flex-shrink: 1; } .oignon { flex-shrink: 0; } Salade Tomate Oignon FLEX-SHRINK
41. CALCUL DE FLEX-GROW-SHRINK accroche-toi bien ! Salade Tomate Oignon 1 On calcule l’Espace Restant Déterminé par la somme des flex-basis (ou des width, ou des min|max-width) 2 Résultat positif ou négatif ? Cas 1 : si l’espace est positif, alors flex-grow s’applique Cas 2 : si l’espace est négatif, alors flex-shrink s’applique 3 Comptez-vous ! Cas 1 : on compte le nombre de flex-grow présents et leur valeur totale Cas 2 : on compte le nombre de flex-shrink présents et leur valeur totale
42. 4 on applique simplement la formule (ici pour flex-grow) :
43. O RLY ?
44. CONCRÈTEMENT ? sérieux, t’as pas compris ?!
45. Salade Tomate 1 On calcule l’Espace Restant flex: 1 est égal à flex: 1 1 0, donc la somme des flex-basis vaut 0 et l’Espace Restant est de 1000px 2 Somme des flex-grow flex-grow identique —> répartition équitable —> +500px chacun (qu’ils ajoutent à leur flex-basis) 3 Calcul la taille finale de chaque élément est donc flex-basis+500px , soit 500 px. flex: 1; flex: 1; 1000px
46. Salade Tomate 1 On calcule l’Espace Restant La somme des flex-basis vaut 700px et l’Espace Restant est de 300px 2 Somme des flex-grow répartition : 
 2/3 de 300px pour le premier, 1/3 de 300px pour le 2è 3 Calcul la taille finale de chaque élément : 500px et 500px flex: 2 0 300px; flex: 1 0 400px; 1000px
47. Flexbox t’aide à construire des mondes merveilleux ! ON EN A GROW !
48. LES BUGS DE FLEXBOX Hey salut IE, comment ça va bien ?
49. FLEXBUGS la bible des bugs de Flexbox https://github.com/philipwalton/flexbugs
50. LES INLINE INTERDITS DE FLEX-ITEM les éléments inline (<span>, <a>, ::before, ::after, …) ne sont pas traités comme des flex-items 1 IE10 - IE11 symptôme : appliquer un display: inline-block; ou block ou flex sur les éléments inline solution : concerne :
51. PAS DE BOX-SIZING DANS FLEX-BASIS le modèle de boîte box-sizing: border-box n’est pas appliqué sur la propriété flex-basis. Les padding et border s’ajoutent donc à la taille. IE10 - IE11 symptôme : remplacer flex-basis par width ou height, ou ajouter un conteneur supplémentaire sans padding / border solution : concerne : 2
52. PAS DE CALC () DANS FLEX-BASIS calc() n’est pas reconnu au sein de flex-basis ou flex. 
 Exemples : flex:0 0 calc(100%/3) ou flex-basis: calc(100%/3) IE10 - IE11 symptôme : ben… pas vraiment, non solution : concerne : 3
53. UNITÉ DE FLEX-BASIS sur IE10-IE11, flex-basis nécessite une unité, même pour la valeur 0 :
 donc flex: 1 1 0; n’est pas reconnu par exemple IE10-IE11 symptôme : toujours spécifier une unité à flex-basis, ex. flex: 1 1 0%; et pas flex: 1 1 0; concerne : solution : 4
54. VALEUR PAR DÉFAUT DE FLEX-SHRINK sur IE10, flex-shrink vaut 0 par défaut et non 1, donc :
 par défaut un flex-item IE10 vaut flex: 0 0 auto; et non flex: 0 1 auto; IE10 symptôme : toujours spécifier la valeur de flex-shrink, ex. flex: 1 1 0%; et pas flex: 1; solution : concerne : 5
55. You shall not use Flexbox. ‟ — Internet Explorer 9
56. TRUCS BIZARRES, COURANTS, PAS VRAIMENT DES BUGS, MAIS NÉANMOINS CHIANTS DANS FLEXBOX
57. RATIO D’IMAGE CASSÉ TAILLE MINIMALE GÊNANTE LARGEURS FAUSSÉES http://www.hadoukenshoryuken.com
58. RATIO D’IMAGE CASSÉ
59. div { display: block; } img { max-width: 100%; height: auto; }
60. j’ai réduit ma fenêtre div { display: block; } img { max-width: 100%; height: auto; }
61. div { display: flex; } img { max-width: 100%; height: auto; }
62. div { display: flex; } img { max-width: 100%; height: auto; } j’ai réduit ma fenêtre
63. div { display: flex; align-items: flex-start; } img { max-width: 100%; height: auto; }
64. = Codepen or didn’t happen div { display: flex; align-items: flex-start; div { display: flex; flex-direction: column; }
65. TAILLE MINIMALE http://www.hadoukenshoryuken.com
66. div { display: flex; } <div>
67. div { display: flex; } p { word-wrap: break-word; } <p>
68. <a> http://www.hadoukenshoryuken.com div { display: flex; } p { word-wrap: break-word; } a { /* rien */ }
69. http://www.hadoukenshoryuken.com div { display: flex; } p { word-wrap: break-word; } a { /* rien */ } j’ai réduit ma fenêtre
70. http://www.hadouken
 shoryuken.com div { display: flex; } p { word-wrap: break-word; min-width: 0; } a { /* rien */ } Codepen or didn’t happen
71. To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height ‟ — les spécifications W3C
72. QUI ? http://www.alsacreations.com/ • éléments « remplacés » : • <img> • <object> • <video> • éléments de formulaire : • <input> • <textarea> • et aussi : • <audio>, <canvas> • mot longs (URL) les flex-items
73. LARGEURS FAUSSÉES lorem elsass ipsum bière choucroute picon kouglof carola wurscht knacks grumbere hopla gal ! lorem elsass ipsum bière choucroute picon kouglof carola wurscht picon kouglof carola wurscht picon kouglof lorem elsass ipsum bière choucroute picon kouglof carola wurscht
74. .flex-container { display: flex; } .premier { /* rien de spécial */ } .deuxieme { /* rien de spécial */ } .flex-container .deuxieme .premier lorem elsass ipsum bière choucroute picon kouglof carola wurscht knacks grumbere hopla gal ! lorem elsass ipsum bière choucroute picon kouglof carola wurscht picon kouglof carola wurscht picon kouglof lorem elsass ipsum bière choucroute picon kouglof carola wurscht choucroute picon kouglof carola wurscht
75. lorem elsass ipsum bière choucroute picon kouglof carola wurscht knacks grumbere hopla gal ! lorem elsass ipsum bière choucroute picon kouglof carola wurscht picon kouglof carola wurscht picon kouglof lorem elsass ipsum bière choucroute picon kouglof carola wurscht choucroute picon kouglof carola wurscht .flex-container { display: flex; } .premier { /* rien de spécial */ } .deuxieme { width: 50%; } flex: 0 1 auto; flex: 0 1 auto 50%;
76. .flex-container { display: flex; } .premier { flex: 1; } .deuxieme { width: 50%; } flex: 1 1 auto 0; flex: 0 1 auto 50%; lorem elsass ipsum bière choucroute picon kouglof carola wurscht knacks grumbere hopla gal ! lorem elsass ipsum bière choucroute picon kouglof carola wurscht picon kouglof carola wurscht picon kouglof lorem elsass ipsum bière choucroute picon kouglof carola wurscht choucroute picon kouglof carola wurscht
77. c’est pas tous les jours facile, hein ? :p ‟ — les spécifications W3C (libre interprétation)
78. bon alors pourquoi Flexbox c’est quand même vachement bien ?
79. FLEXBOX ET LES GRILLES source
80. Salade Tomate Oignon Picon bière .flex-container { display: block; }
81. Salade Tomate Oignon Picon bière .flex-container { display: flex; }
82. Salade Tomate Oignon Picon bière .flex-container { display: flex; } .flex-item { flex: 1; }
83. Salade Tomate Oignon Picon bière .flex-container { display: flex; } .flex-item { flex: 1; } .flex-item:not(:first-child) { margin-left: 1rem; } ⚠ pas de multi-lignes possible
84. flex: 1; est une méthode idéale pour une disposition mono-ligne. ‟ — moi, à l’instant
85. Salade Tomate Oignon Picon bière .flex-container { display: flex; } (je veux 2 colonnes) .flex-item { flex-basis: calc(100% / 2); }
86. Salade Tomate Oignon Picon bière .flex-container { display: flex; flex-wrap: wrap; } .flex-item { flex-basis: calc(100% / 2); } (je veux 2 colonnes)
87. .flex-container { display: flex; flex-wrap: wrap; } .flex-item { flex-basis: calc(100% / 3); } (je veux 3 colonnes) Salade Tomate Oignon Picon bière ❤ pas de whitespace
 ❤ pas de sortie du flux
88. ‟Les grilles Flexbox, c’est pas parfait mais c’est toujours mieux que float et inline- block. — moi, mais je dis ça je dis rien
90. https://github.com/Heydon/fukol-grids la grille de 93 octets .fukol-grid { display: flex; flex-wrap: wrap; margin: -0.5em;
 } .fukol-grid > * { flex: 1 0 10em; margin: 0.5em; }
91. FLEXBOX ET LES PATTERNS
92. SPACE-BETWEEN 1
93. .media { display: flex; justify-content: space-between; } Flexbox et space-between :
94. .header { display: flex; justify-content: space-between; } SPACE-BETWEEN ❤
95. L’OBJET « MEDIA » 2
96. source : philipwalton
97. ‟L’objet « media » a fait économiser des 100aines de lignes de code sur Facebook. — Nicole Sullivan, OOCSS source
98. source : dna.fr (2012)
99. source : lemonde.fr (2016)
100. .media { display: flex; align-items: flex-start; } .media-body{ flex: 1; } Objet « Media » en Flexbox : .media--reverse { flex-direction: row-reverse; } .media-figure--center { align-self: center; } Objet « Media » (variantes) :
101. L’OBJET « AUTOGRID » 3
102. démo : CodePen article sur CSS-tricks
104. ENCORE !
105. .autogrid { display: flex; } .autogrid > * { flex: 1; } Objet « Autogrid » : .autogrid--gutter > *:not(:first-child) { margin-left: 1rem; } .autogrid-cell--big { flex: 2; } Objet « Autogrid » (variantes) :
106. ‟L’objet « autogrid » a sauvé 1337 claviers et conservé 300000 cheveux de développeurs. — Moi, parce que j’adore m’auto-citer
107. IL VOIT DU FLEXBOX PARTOUT !
108. PERNOD-RICARD .header { display: flex; justify-content: space-between; }
109. CDISCOUNT - YAHOO! .header { display: flex; justify-content: space-between; } .search{ display: flex; } .search-input{ flex: 1; min-width: 0; } .media{ /* toi-même tu sais */ }
110. ASANA .task-header { display: flex; justify-content: space-between; } .push-right { margin-left: auto; } .task-item { display: flex; align-items: center; } .task-item--is-important{ order: -1; }
111. TWEETDECK .col-header { display: flex; justify-content:
 space-between; } .nav-footer{ margin-top: auto; } .media{ /* toi-même tu sais */ }
112. 3000% DE TEMPS ÉCONOMISÉ FLEX: 1 SPACE-BETWEEN + MARGIN AUTO + OBJET MEDIA + OBJET AUTOGRID + (source : Francis Lalanne)
113. .flex-container { display: flex; flex-flow: column nowrap; align-items: space-between; flex-direction: row; }
 .flex-item { flex: 1; display: block; align-content: center; flex-shrink: 1; float: left; clear: both; z-index: -1; bottom: 1em; vertical-align: top; width: 250px; height: 250px; } QUIZ ! quelles déclarations n’ont aucun effet ? 
 (= ne s’appliquent pas, ou ne changent pas les valeurs par défaut)
114. OK maintenant I know Flexbox … jusqu’à demain
115. RESSOURCES
116. LIVRE FLEXBOX http://goetter.fr/livres/flexbox/ ben ouais fallait bien le caser
117. https://github.com/afonsopacifer/awesome-flexbox toutes les ressources Flexbox AWESOME FLEXBOX
118. FLEXIBILITY https://github.com/10up/flexibility <script src="flexibility.js"></script> .container { -js-display: flex; display: flex; } Flexbox pour IE8 - IE9
119. FLEXBOX PATTERNS http://www.flexboxpatterns.com/ composants avec Flexbox
120. un micro-grille en Flexbox GRILLADE http://grillade.knacss.com/
121. UNE FORMATION ? formations.alsacreations.fr
122. MERCI ! @goetter alsacreations.fr