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 ?

1. by raphaël

2. Crédit photo © Mathieu Drouet
raphaël goetter
✓ alsacreations.com
✓ goetter.fr
✓ mydevice.io
✓ knacss.com
✓ @goetter

3. flexbox ?

4. distribution
ordonnancement
alignement
flexibilité

5. compatible ?

6. oui !
(IE 10) (Safari 3.1)(Android 2.1)
(Chrome 4)
(Firefox 2) (Opera 12.1)
(Stats Caniuse France)

7. standard ?

8. presque !

9. erf !

10. OK, je fais quoi avec ?

11. Picon bière
mais aussi…

12. nav content

13. nav content

14. nav content
mais aussi…

15. je suis un pied toujours en bas

16. je suis un pied toujours en bas

17. je suis un pied toujours en bas
mais aussi…

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. 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. 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. 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. en action !

23. .parent {
display: block;
}

24. Salade
Tomate
Oignon
Picon bière
.enfant {
display: block;
}

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. distribution

27. distribution
flex-­‐direction

28. Salade Tomate Oignon Picon bière
.parent {
display: flex;
}

29. Salade Tomate Oignon Picon bière
.parent {
display: flex;
flex-­‐direction: row;
}
axe principal
=
horizontal

30. SaladeTomateOignonPicon bière
.parent {
display: flex;
flex-­‐direction: row-­‐reverse;
}

31. exemple vite fait ?

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. .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. Salade
Tomate
Oignon
Picon bière
.parent {
display: flex;
flex-­‐direction: column;
}
axe principal
=
vertical

35. Salade
Tomate
Oignon
Picon bière
.parent {
display: flex;
flex-­‐direction: column-­‐reverse;
}

36. Salade Tomate Oignon Picon bière
.parent {
display: flex;
}
erf, ça déborde

37. Salade Tomate Oignon
Picon bière
.parent {
display: flex;
flex-­‐wrap: wrap;
}

38. Salade Tomate Oignon
Picon bière
.parent {
display: flex;
flex-­‐wrap: wrap-­‐reverse;
}

39. ‟Jesus, inventeur officiel de la
grande distribution (de pains)…
— Chang-Edouard Leclerc, distributeur
</distribution>

40. ordonnancement

41. ordonnancement
order

42. Salade
Tomate
Oignon
Picon bière
.parent {
display: flex;
flex-­‐direction: column;
}

43. Salade
Tomate
Oignon
Picon bière
.oignon {
order: 1;
}

44. Salade
Tomate
Oignon
Picon bière
.oignon {
order: 1;
}
.picon-­‐biere {
order: -­‐1;
}

45. exemple vite fait ?

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. 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. ‟Quand c’est le bordel dans ma
chambre, j’invoque les
Forces de l’Ordre !
— Luke Skybloguer, stagiaire Jedi
</ordonnancement>

49. alignement
(axe principal)

50. alignement
(axe principal)
justify-­‐content

51. Salade
Tomate
Oignon
Picon bière
.parent {
display: flex;
flex-­‐direction: column;
}

52. Salade
Tomate
Oignon
Picon bière
.parent {
display: flex;
flex-­‐direction: column;
}
justify-­‐content: flex-­‐end;

53. Salade
Tomate
Oignon
Picon bière
.parent {
display: flex;
flex-­‐direction: column;
}
justify-­‐content: center;

54. Salade
Tomate
Oignon
Picon bière
.parent {
display: flex;
flex-­‐direction: column;
}
justify-­‐content: space-­‐
between;

55. alignement
(axe secondaire)

56. alignement
(axe secondaire)
align-­‐items

57. Salade
Tomate
Oignon
Picon bière
.parent {
display: flex;
flex-­‐direction: column;
}

58. .parent {
display: flex;
flex-­‐direction: column;
}
align-­‐items: flex-­‐start;
Salade
Tomate
Oignon
Picon bière

59. Salade
Tomate
Oignon
Picon bière
align-­‐items: flex-­‐end;
.parent {
display: flex;
flex-­‐direction: column;
}

60. Salade
Tomate
Oignon
Picon bière
align-­‐items: center;
.parent {
display: flex;
flex-­‐direction: column;
}

61. Salade
Tomate
Oignon
Picon bière
align-­‐items: stretch;
.parent {
display: flex;
flex-­‐direction: column;
}

62. .parent {
display: flex;
flex-­‐direction: column;
align-­‐items: stretch;
}
.oignon {
align-­‐self: flex-­‐end;
}
Salade
Tomate
Oignon
Picon bière

63. ‟Ça se saurait si on pouvait
centrer verticalement avec
margin: auto !
— Jean-Kévin Bayrou, centriste
</alignement>

64. mais en fait…

65. flexbox est bi !

66. Picon bière
.parent {
display: flex;
}
.picon-­‐biere {
margin: auto;
}
Codepen or didn’t happen (margin-auto)
PICON BIÈRE !

67. flexibilité

68. flexibilité
flex

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. 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. ‟Non, un « gabarit élastique »
n’est pas qu’un acteur de films
pour adultes
— Clarisse Morgane, contorsionniste
</flexibilité>

78. résumé

79. distribution
ordonnancement
alignement
flexibilité

80. distribution
ordonnancement
alignement
flexibilité
flex-­‐direction (défaut = row)

81. distribution
ordonnancement
alignement
flexibilité
order (défaut = 0)

82. distribution
ordonnancement
alignement
flexibilité
justify-­‐content (défaut = flex-­‐start)
align-­‐items (défaut = stretch)
align-­‐self (défaut = auto)

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. un template en 5min

85. ouais

86. header
nav
content
footer
body
.wrapper

87. header
nav
content
footer
body {
min-­‐height: 100vh;
}
IE9+
#lesavieztu?

88. header
nav
content
footer
body {
display: flex;
flex-­‐direction: column;
flex-­‐wrap: wrap;
}
min-­‐height

89. header
nav
content
footer
body
min-­‐height
display
flex-­‐direction
flex-­‐wrap
}
.wrapper {
flex: 1;
}

90. header
nav content
footer
body
min-­‐height
display
flex-­‐direction
flex-­‐wrap
}
.wrapper
flex
}
display: flex;

91. header
nav content
footer
body
min-­‐height
display
flex-­‐direction
flex-­‐wrap
}
.wrapper
display
flex
}
.content {
flex: 1;
}

92. .wrapper {
display: flex;
display: block;
}
header
nav
content
footer
petit
écran ?

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. Job’s done
Codepen or didn’t happen (template)

95. ‟Bien sûr que flexbox vous aide
à protéger vos données
personnelles sur Facebook !
— Marcello Zuckerberg, Community Manager

96. bonus

97. BFC !

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. Salade
.parent {
display: block;
}
.salade {
display: block;
}

100. Salade
.parent {
display: block;
}
.salade {
display: block;
float: left;
}

101. Salade
.parent {
display: flex;
}
.salade {
display: block;
float: left;
}
un float ne déborde pas d’un « flex-container »

102. nav {
display: block;
}
.content {
display: block;
}
nav
content

103. contentnav nav {
float: left;
}
.content {
display: block;
}

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. flexbox,
une révolution ?

106. ouais

107. flexbox, le futur du
positionnement ?

108. ça dépend®©™

109. flexbox,
en prod ?

110. ouais
(avec des précautions : Autoprefixer ♥ )

111. ressources

112. http://philipwalton.github.io/solved-by-flexbox/http://flexboxgrid.com/http://the-echoplex.net/flexyboxes/http://jackintheflexbox.tumblr.com/

113. Flexbox
all the things !

114. merci
et
@goetter
Icônes browsers « Pony »:
Safari / Opera by McSadat
Chrome by he4rtofcourage
IE by McSadat
Firefox by NoReasonToHope
raphaël
BISOU ♥