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
   

   View Slide

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

   View Slide

3. flexbox ?
   

   View Slide

4. View Slide

5. distribution
   ordonnancement
   alignement
   flexibilité
   

   View Slide

6. compatible ?
   

   View Slide

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

   View Slide

8. en action !
   

   View Slide

9. .parent {
   display: block;
   }
   

   View Slide

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

    View Slide

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;
    

    View Slide

12. distribution
    

    View Slide

13. distribution
    flex-direction
    

    View Slide

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

    View Slide

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

    View Slide

16. .parent {
    display: flex;
    flex-direction: row-reverse;
    }
    Salade
    Tomate
    Oignon
    Picon bière
    

    View Slide

17. un exemple vite fait ?
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

20. Salade
    Tomate
    Oignon
    Picon bière
    .parent {
    display: flex;
    flex-direction: column;
    }
    axe principal
    =
    vertical
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. ordonnancement
    

    View Slide

27. ordonnancement
    order
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. exemple vite fait ?
    

    View Slide

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 !
    

    View Slide

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;
    }
    

    View Slide

34. ‟Quand c’est le bordel dans ma
    chambre, j’invoque les 

    Forces de l’Ordre !
    — Luke Skybloguer, stagiaire Jedi
    
    

    View Slide

35. alignement

    (axe principal)
    

    View Slide

36. alignement

    (axe principal)
    justify-content
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    between;
    

    View Slide

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

    around;
    

    View Slide

42. alignement

    (axe secondaire)
    

    View Slide

43. alignement

    (axe secondaire)
    align-items
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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;
    }
    

    View Slide

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

    View Slide

52. t’en as pas marge !?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. header
    content

    lorem schnapsum hopla

    choucroute saucisse
    footer
    body {
    display: flex;
    flex-direction: column;
    }
    

    View Slide

57. header
    content

    lorem schnapsum hopla

    choucroute saucisse
    footer
    body {
    display: flex;
    flex-direction: column;
    }
    footer {
    margin-top: auto;
    }
    

    View Slide

58. mais en fait…
    

    View Slide

59. flexbox est bi !
    

    View Slide

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

    View Slide

61. flexibilité
    

    View Slide

62. flexibilité
    flex-grow, flex-shrink, flex-basis
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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%
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

74. exemple vite fait ?
    

    View Slide

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

    View Slide

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

    View Slide

77. Flexbox t’aide à construire des mondes
    merveilleux !
    ON EN A GROW !
    

    View Slide

78. ‟Non, un « gabarit élastique »
    n’est pas qu’un acteur de films
    pour adultes
    — Clarisse Morgane, contorsionniste
    
    

    View Slide

79. résumé
    

    View Slide

80. distribution
    ordonnancement
    alignement
    flexibilité
    

    View Slide

81. distribution
    ordonnancement
    alignement
    flexibilité
    flex-direction (défaut = row)
    

    View Slide

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

    View Slide

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

    View Slide

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)
    

    View Slide

85. un template en 5min ?
    

    View Slide

86. ouais !
    header
    nav content
    footer
    

    View Slide

87. header
    nav
    content
    footer
    body
    .wrapper
    

    View Slide

88. header
    nav
    content
    footer
    body {
    min-height: 100vh;
    }
    IE9+

    #lesavieztu?
    

    View Slide

89. header
    nav
    content
    footer
    body {
    display: flex;
    flex-direction: column;
    }
    min-height: 100vh;
    

    View Slide

90. header
    nav
    content
    footer
    body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    }
    .wrapper {
    flex: 1;
    }
    

    View Slide

91. header
    nav content
    footer
    body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    }
    .wrapper {
    flex: 1;
    }
    display: flex;
    

    View Slide

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
    

    View Slide

93. .wrapper {
    display: flex;
    display: block;
    }
    header
    nav
    content
    footer
    petit
    écran ?
    1 valeur modifiée
    

    View Slide

94. header
    nav
    content
    footer
    Flexbox t’aide à
    construire des mondes
    merveilleux !
    JTM ♥
    .wrapper {
    display: flex;
    flex-direction: column;
    }
    nav {
    order: 1;
    }
    petit
    écran ?
    

    View Slide

95. Job’s done
    Codepen or didn’t happen (template)
    

    View Slide

96. une navigation
    responsive ?
    

    View Slide

97. View Slide

98. 
    
    
    Raphaël Goetter
    
    
    à propos
    blog
    labo
    contact
    
    HTML :
    

    View Slide

99. @media (max-width: 480px) {

    nav a {
    display: block;
    padding: .4em 1em;
    text-decoration: none;
    color: #fff;
    }
    }
    CSS (petits écrans) :
    

    View Slide

100. View Slide

101. @media (min-width: 1025px) {
     nav {
     display: flex;
     }
     }
     CSS (écrans larges) :
     

     View Slide

102. @media (min-width: 1025px) {
     nav {
     display: flex;
     justify-content: center;
     }
     }
     CSS (écrans larges) :
     

     View Slide

103. @media (min-width: 1025px) {
     nav {
     display: flex;
     justify-content: center;
     align-items: center;
     }
     }
     CSS (écrans larges) :
     

     View Slide

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) :
     

     View Slide

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) :
     

     View Slide

106. Job’s done
     http://goetter.fr/
     

     View Slide

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

     View Slide

108. flexbox, 

     une révolution ?
     

     View Slide

109. ouais
     

     View Slide

110. flexbox, le futur du
     positionnement ?
     

     View Slide

111. ça dépend®©™
     

     View Slide

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
     

     View Slide

113. flexbox, 

     en prod ?
     

     View Slide

114. ouais
     (avec des précautions : Autoprefixer — )
     

     View Slide

115. (la preuve)
     

     View Slide

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
     

     View Slide

117. chouette, des démos !
     

     View Slide

118. ressources
     

     View Slide

119. http://philipwalton.github.io/solved-by-flexbox/
     

     View Slide

120. http://jackintheflexbox.tumblr.com/
     

     View Slide

121. http://the-echoplex.net/flexyboxes/
     

     View Slide

122. http://www.vincent-valentin.name/articles/le-petit-flexbox-illustre
     

     View Slide

123. http://www.knacss.com grilles et layout basés sur flexbox
     

     View Slide

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

     View Slide

125. Flexbox
     all the things !
     

     View Slide

126. Avant Flexbox, je n’étais qu’un être
     surhumain normal…
     ‟
     — Chuck Maurice, chapelier
     

     View Slide

127. formations.alsacreations.fr
     

     View Slide

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

     View Slide