FlexRox

Adf4ff2212aea06456ca3c3bca95c0db?s=47 Raphael Goetter
November 06, 2015

 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 ?

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

November 06, 2015
Tweet

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 ?

  4. None
  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 ?

  97. None
  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) :
  100. None
  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 ♥