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

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

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

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. t’en as pas marge !?

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

66. Salade Tomate Oignon Picon bière
.parent {
display: flex;
}
.picon-­‐bière {
margin-­‐left: auto;
}

67. Salade Tomate Oignon Picon bière
.parent {
display: flex;
}
.oignon{
margin-­‐left: auto;
}

68. header
content
lorem schnapsum hopla
choucroute saucisse
footer
body {
display: flex;
flex-­‐direction: column;
}

69. header
content
lorem schnapsum hopla
choucroute saucisse
footer
body {
display: flex;
flex-­‐direction: column;
}
footer {
margin-­‐top: auto;
}

70. mais en fait…

71. flexbox est bi !

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

73. flexibilité

74. flexibilité
flex-­‐grow, flex-­‐shrink, flex-­‐basis

75. Picon bière
.parent {
display: flex;
}
.picon-­‐biere {
width: 200px;
}
flex-grow

76. Picon bière
.parent {
display: flex;
}
.picon-­‐biere {
width: 200px;
flex-­‐grow: 1;
}
flex-grow

77. Picon bière
.parent {
display: flex;
}
.picon-­‐biere {
width: 200px;
}
flex-shrink

78. Picon bière
.parent {
display: flex;
}
.picon-­‐biere {
width: 200px;
flex-­‐shrink: 1;
}
flex-shrink

79. Picon bière
.parent {
display: flex;
}
.picon-­‐biere {
flex-­‐basis: 200px;
}
flex-basis

80. Picon bière
.parent {
display: flex;
}
.picon-­‐biere {
flex-­‐basis: 200px;
flex-­‐grow: 1;
}
flex-basis

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

83. Salade
Tomate
Oignon
Picon bière
.oignon {
flex: 1;
}

84. Salade
Tomate
Oignon
Picon bière
.oignon {
flex: 1;
}
.tomate {
flex: 1;
}
50%
50%

85. Salade
Tomate
Oignon
Picon bière
.oignon {
flex: 1;
}
.tomate {
flex: 2;
}
2/3
1/3

86. exemple vite fait ?

87. accueil société contact picon
nav a {
flex: 1;
}
nav a:hover {
flex: 2;
}

88. accueil société contact picon
nav a {
flex: 1;
}
nav a:hover {
flex: 2;
}

89. flexibilité à tous les
étages

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

94. résumé

95. distribution
ordonnancement
alignement
flexibilité

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

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

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

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

101. ouais

102. header
nav
content
footer
body
.wrapper

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

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

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

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

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

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

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

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

112. flexbox,
une révolution ?

113. ouais

114. flexbox, le futur du
positionnement ?

115. ça dépend®©™

116. flexbox,
en prod ?

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

118. (la preuve)

119. ressources

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

121. https://github.com/philipwalton/flexbugs
(et surtout)

122. Flexbox
all the things !

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