Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FlexRox

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 ?

Raphael Goetter

November 06, 2015
Tweet

More Decks by Raphael Goetter

Other Decks in Design

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