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

Flexbox fallait pas l'inviter

Flexbox fallait pas l'inviter

Toi qui t'es déjà plongé(e) dans CSS3 Flexbox, tu t'es sans doute déjà rendu(e) compte que ce mode de positionnement n'est pas la réponse à la grande question sur la vie, l'univers et le reste.
En gros, des fois ça marche, des fois ça marche pas, ... et des fois ça dépend !
Déjouons ensemble les pièges de Flexbox et franchissons un nouveau cap dans nos projets web.

Raphael Goetter

February 26, 2020
Tweet

More Decks by Raphael Goetter

Other Decks in Programming

Transcript

  1. FALLAIT PAS
    Flexbox
    Nationale-Nederlanden, Prague, République Tchèque
    L’INVITER

    View Slide

  2. hello, je suis alsacien
    raphaël goetter

    View Slide

  3. Source : Nick Marchenko (Twitter)
    FLEXBOX
    DANS TES RÊVES :
    FLEXBOX
    DANS TON NAVIGATEUR:

    View Slide

  4. FLEXBOX
    compatibilité actuelle

    View Slide

  5. Source : https://www.chromestatus.com/metrics/css/timeline/popularity/233
    FLEXBOX
    usage actuel
    51%

    View Slide

  6. ALORS C’EST QUOI
    LE PROBLÈME ?

    View Slide

  7. FLEXBOX N’EST PAS INTUITIF
    FLEXBOX EST COMPLIQUÉ
    FLEXBOX EST BIZARRE

    View Slide

  8. FLEXBOX N’EST PAS
    INTUITIF
    et je vais te le prouver
    1

    View Slide

  9. JUSTIFY-
    vs
    ALIGN-

    View Slide

  10. JUSTIFY-
    vs
    ALIGN-

    .parent {
    display: flex;
    }

    View Slide

  11. JUSTIFY-
    vs
    ALIGN-

    .parent {
    display: flex;
    justify-content: flex-end;
    }
    axe principal

    View Slide

  12. JUSTIFY-
    vs
    ALIGN-

    .parent {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    }
    axe principal

    View Slide

  13. JUSTIFY-
    vs
    ALIGN-

    .parent {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    }
    axe principal

    View Slide

  14. JUSTIFY-
    vs
    ALIGN-
    Le préfixe (justify ou align)
    dépend de l’axe principal
    dans le parent.

    View Slide

  15. -CONTENT
    vs
    -ITEMS

    View Slide

  16. JUSTIFY-CONTENT
    aligne les enfants sur l’axe principal
    ALIGN-CONTENT-ITEMS
    aligne les enfants sur l’axe secondaire
    ALIGN-CONTENT
    aligne plusieurs rangées d’enfants sur l’axe secondaire (flex-wrap)
    JUSTIFY-ITEMS
    … n’existe pas !

    View Slide

  17. -CONTENT
    vs
    -ITEMS
    Le suffixe (content ou items)
    dépend aussi de l’axe
    principal dans le parent.

    View Slide

  18. -SELF
    vs
    -PAS-SELF

    View Slide

  19. -SELF
    vs
    -PAS-SELF

    .parent {
    display: flex;
    }
    .kiwi {
    align-self: flex-start;
    }

    View Slide

  20. -SELF
    vs
    -PAS-SELF

    .parent {
    display: flex;
    }
    .kiwi {
    align-self: center;
    }

    View Slide

  21. -SELF
    vs
    -PAS-SELF

    .parent {
    display: flex;
    }
    .kiwi {
    align-self: center;
    justify-self: center; ?
    }

    View Slide

  22. ALIGN-SELF
    vs
    JUSTIFY-SELF
    L’un des deux n’existe pas
    dans les spécifications
    Flexbox

    View Slide

  23. QUIZ !

    View Slide


  24. .parent {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    }
    .kiwi {
    justify-items: flex-start;
    justify-self: center;
    align-items: flex-end;
    }
    MAIS OÙ SE PLACE KIWI?

    View Slide

  25. 1
    .parent {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    }
    .kiwi {
    justify-items: flex-start;
    justify-self: center;
    align-items: flex-end;
    }
    MAIS OÙ SE PLACE KIWI?
    2
    3 4
    4 6

    View Slide


  26. .parent {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    }
    .kiwi {
    justify-items: flex-start;
    justify-self: center;
    align-items: flex-end;
    }
    MAIS OÙ SE PLACE KIWI?
    2
    3 4
    4 6
    axe principal

    View Slide

  27. FLEXBOX N’EST PAS
    INTUITIF
    tu vois ce que je veux dire maintenant ?
    1

    View Slide

  28. FLEXBOX EST
    COMPLIQUÉ
    ça a l’air simple mais en fait…
    2

    View Slide

  29. PRIORITÉS DANS FLEXBOX
    Je suis flex-wrap, dois-je laisser passer flex-shrink ?

    View Slide

  30. width flex-basis
    .flex-item {
    flex-basis: 500px;
    width: 250px;
    }

    View Slide

  31. FIGHT !
    width flex-basis

    View Slide

  32. width
    flex-basis
    FLEX-BASIS WINS !

    View Slide

  33. flex-basis: auto;
    width: valeur;
    flex-basis: valeur;
    flex-grow | flex-shrink
    flex-wrap
    max-width
    min-width
    PRIORITÉS DANS FLEXBOX

    View Slide

  34. CONCRÈTEMENT ?

    View Slide

  35. Salade Tomate Oignon Picon bière
    .flex-container {
    display: flex;
    }

    View Slide

  36. Salade Tomate Oignon Picon bière
    .flex-container {
    display: flex;
    }
    .flex-item {
    width: 50%;
    }
    flex-basis: auto;
    width: valeur;
    flex-basis: valeur;
    flex-grow | flex-shrink
    flex-wrap
    max-width
    min-width

    View Slide

  37. .flex-container {
    display: flex;
    }
    .flex-item {
    width: 3000px;
    }
    Salade Tomate Oignon Picon bière
    flex-basis: auto;
    width: valeur;
    flex-basis: valeur;
    flex-grow | flex-shrink
    flex-wrap
    max-width
    min-width

    View Slide

  38. flex-basis: auto;
    width: valeur;
    flex-basis: valeur;
    flex-grow | flex-shrink
    flex-wrap
    max-width
    min-width
    .flex-container {
    display: flex;
    flex-wrap: wrap;
    }
    .flex-item {
    width: 3000px;
    }
    Salade
    Tomate
    Oignon
    Picon bière

    View Slide

  39. SUPER
    « une question de taille… »
    QUIZ !

    View Slide

  40. .flex-item {
    flex: 1;
    width: 250px;
    }
    1000px
    TAILLE 1

    View Slide

  41. .flex-item {
    flex: 1;
    width: 250px;
    }
    1000PX
    flex-grow le force à remplir l’espace restant
    1000px
    TAILLE 1

    View Slide

  42. .flex-item {
    flex-basis: 500px;
    width: 250px;
    }
    1000px
    TAILLE 2

    View Slide

  43. .flex-item {
    flex-basis: 500px;
    width: 250px;
    }
    500PX
    flex-basis l’emporte sur width
    1000px
    TAILLE 2

    View Slide

  44. .flex-item {
    flex-basis: auto;
    width: 250px;
    }
    1000px
    TAILLE 3

    View Slide

  45. .flex-item {
    flex-basis: auto;
    width: 250px;
    }
    250PX
    width l’emporte sur flex-basis: auto
    1000px
    TAILLE 3

    View Slide

  46. .flex-item {
    flex-basis: 500px;
    width: 250px;
    min-width: 750px;
    }
    1000px
    TAILLE 4

    View Slide

  47. 750PX
    .flex-item {
    flex-basis: 500px;
    width: 250px;
    min-width: 750px;
    }
    min-width l’emporte sur width et flex-basis
    1000px
    TAILLE 4

    View Slide

  48. .flex-item {
    flex-basis: 500px;
    flex-shrink: 1;
    min-width: 1250px;
    }
    1000px
    TAILLE 5

    View Slide

  49. 1250PX
    .flex-item {
    flex-basis: 500px;
    flex-shrink: 1;
    min-width: 1250px;
    }
    min-width l’emporte systématiquement
    1000px
    TAILLE 5

    View Slide

  50. 1000px
    TAILLE 6
    .flex-item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 1250px;
    width: 500px;
    min-width: 750px;
    }

    View Slide

  51. 1000PX
    flex-basis et min-width et flex-shrink s’appliquent
    .flex-item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 1250px;
    width: 500px;
    min-width: 750px;
    }
    1000px
    TAILLE 6

    View Slide

  52. EN DÉTAIL :
    FLEX-GROW,
    FLEX-SHRINK,
    LE CALCUL SAVANT

    View Slide

  53. FLEX-GROW
    facteur d’agrandissement si espace restant dans le flex-container
    Salade Tomate Oignon
    .salade {
    flex-grow: 0;
    }
    .tomate {
    flex-grow: 0;
    }
    .oignon {
    flex-grow: 0;
    }

    View Slide

  54. FLEX-GROW
    facteur d’agrandissement si espace restant dans le flex-container
    Salade Tomate Oignon
    .salade {
    flex-grow: 0;
    }
    .tomate {
    flex-grow: 1;
    }
    .oignon {
    flex-grow: 0;
    }

    View Slide

  55. facteur d’agrandissement si espace restant dans le flex-container
    Salade Tomate Oignon
    .salade {
    flex-grow: 1;
    }
    .tomate {
    flex-grow: 2;
    }
    .oignon {
    flex-grow: 0;
    }
    FLEX-GROW

    View Slide

  56. facteur de rétrécissement si espace négatif dans le flex-container
    Salade Tomate Oignon
    * {flex-basis: 500px;}
    .salade {
    flex-shrink: 0;
    }
    .tomate {
    flex-shrink: 0;
    }
    .oignon {
    flex-shrink: 0;
    }
    FLEX-SHRINK

    View Slide

  57. facteur de rétrécissement si espace négatif dans le flex-container
    * {flex-basis: 500px;}
    .salade {
    flex-shrink: 0;
    }
    .tomate {
    flex-shrink: 1;
    }
    .oignon {
    flex-shrink: 0;
    }
    Salade Tomate Oignon
    FLEX-SHRINK

    View Slide

  58. facteur de rétrécissement si espace négatif dans le flex-container
    * {flex-basis: 500px;}
    .salade {
    /* rien */
    }
    .tomate {
    flex-shrink: 1;
    }
    .oignon {
    flex-shrink: 0;
    }
    Salade Tomate Oignon
    FLEX-SHRINK

    View Slide

  59. CALCUL DE FLEX-GROW-SHRINK
    accroche-toi bien !
    Salade Tomate Oignon
    1 On calcule l’Espace Restant
    Déterminé par la somme des flex-basis (ou des width, ou des min|max-width)
    2 Résultat positif ou négatif ?
    Cas 1 : si l’espace est positif, alors flex-grow s’applique
    Cas 2 : si l’espace est négatif, alors flex-shrink s’applique
    3 Comptez-vous !
    Cas 1 : on compte le nombre de flex-grow présents et leur valeur totale
    Cas 2 : on compte le nombre de flex-shrink présents et leur valeur totale

    View Slide

  60. 4
    on applique simplement la formule (ici pour flex-grow) :

    View Slide

  61. O RLY ?

    View Slide

  62. CONCRÈTEMENT ?
    sérieux, t’as pas compris ?!

    View Slide

  63. Salade Tomate
    1 On calcule l’Espace Restant
    flex: 1 est égal à flex: 1 1 0, donc la somme des flex-basis vaut 0 et l’Espace
    Restant est de 1000px
    2 Somme des flex-grow
    flex-grow identique —> répartition équitable —> +500px chacun (qu’ils ajoutent à
    leur flex-basis)
    3 Calcul
    la taille finale de chaque élément est donc flex-basis+500px , soit 500 px.
    flex: 1; flex: 1;
    1000px

    View Slide

  64. Salade Tomate
    1 On calcule l’Espace Restant
    La somme des flex-basis vaut 700px et l’Espace Restant est de 300px
    2 Somme des flex-grow
    répartition :
    2/3 de 300px pour le premier, 1/3 de 300px pour le 2è
    3 Calcul
    la taille finale de chaque élément : 500px et 500px
    flex: 2 0 300px; flex: 1 0 400px;
    1000px

    View Slide

  65. FLEXBOX EST
    COMPLIQUÉ
    tu vois, je te l’avais dit
    2

    View Slide

  66. FLEXBOX EST
    BIZARRE
    certains comportements sont très inattendus
    3

    View Slide

  67. RATIO D’IMAGE
    CASSÉ
    TAILLE MINIMALE
    GÊNANTE
    LARGEURS
    FAUSSÉES
    http://www.hadoukenshoryuken.com

    View Slide

  68. RATIO D’IMAGE CASSÉ

    View Slide

  69. div {
    display: block;
    }
    img {
    max-width: 100%;
    height: auto;
    }

    View Slide

  70. j’ai réduit ma fenêtre
    div {
    display: block;
    }
    img {
    max-width: 100%;
    height: auto;
    }

    View Slide

  71. div {
    display: flex;
    }
    img {
    max-width: 100%;
    height: auto;
    }

    View Slide

  72. div {
    display: flex;
    }
    img {
    max-width: 100%;
    height: auto;
    }
    j’ai réduit ma fenêtre

    View Slide

  73. div {
    display: flex;
    }
    img {
    max-width: 100%;
    height: auto;
    align-self: flex-start;
    }

    View Slide

  74. TAILLE MINIMALE
    http://www.hadoukenshoryuken.com

    View Slide

  75. div {
    display: block;
    }

    View Slide

  76. div {
    display: block;
    }
    p {
    word-wrap: break-word;
    }

    View Slide


  77. http://www.hadoukenshoryuken.com
    div {
    display: block;
    }
    p {
    word-wrap: break-word;
    }

    View Slide

  78. div {
    display: block;
    }
    p {
    word-wrap: break-word;
    }
    j’ai réduit ma fenêtre
    http://www.hadouken
    shoryuken.com

    View Slide


  79. http://www.hadoukenshoryuken.com
    div {
    display: flex;
    }
    p {
    word-wrap: break-word;
    }

    View Slide

  80. http://www.hadoukenshoryuken.com
    div {
    display: flex;
    }
    p {
    word-wrap: break-word;
    }
    j’ai réduit ma fenêtre

    View Slide

  81. To provide a more
    reasonable default
    minimum size for flex
    items, this specification
    introduces a new auto value
    as the initial value of the
    min-width and min-height

    — les spécifications W3C

    View Slide

  82. • Tous les éléments du monde
    ont une valeur de min-width
    égale à 0
    • Sauf les flex items dont la
    valeur est auto
    • Ils ne peuvent donc pas se
    réduire s’ils ont du contenu
    « insécable »

    — libre traduction

    View Slide

  83. http://www.hadoukenshoryuken.com
    div {
    display: flex;
    }
    p {
    word-wrap: break-word;
    }
    j’ai réduit ma fenêtre

    View Slide

  84. http://www.hadouken
    shoryuken.com
    div {
    display: flex;
    }
    p {
    word-wrap: break-word;
    min-width: 0;
    }

    View Slide

  85. QUI ?
    http://www.alsacreations.com/
    • éléments « remplacés » :



    • éléments de formulaire :


    • et aussi :
    • ,
    • mot longs (URL)
    les flex-items

    View Slide

  86. * {
    min-width: 0;
    }
    ?

    View Slide

  87. LARGEURS FAUSSÉES
    lorem elsass ipsum bière
    choucroute picon kouglof
    carola wurscht knacks
    grumbere hopla gal !
    lorem elsass ipsum bière
    choucroute picon kouglof
    carola wurscht picon kouglof
    carola wurscht picon kouglof
    lorem elsass
    ipsum bière
    choucroute
    picon kouglof
    carola wurscht

    View Slide

  88. .flex-container {
    display: flex;
    }
    .premier {
    /* rien de spécial */
    }
    .deuxieme {
    /* rien de spécial */
    }
    .flex-container
    .deuxieme
    .premier
    lorem elsass ipsum bière
    choucroute picon kouglof
    carola wurscht knacks
    grumbere hopla gal !
    lorem elsass ipsum bière
    choucroute picon kouglof
    carola wurscht picon kouglof
    carola wurscht picon kouglof
    lorem elsass
    ipsum bière
    choucroute
    picon kouglof
    carola wurscht
    choucroute
    picon kouglof
    carola wurscht

    View Slide

  89. lorem elsass ipsum bière
    choucroute picon kouglof carola
    wurscht knacks grumbere hopla
    gal !
    lorem elsass ipsum bière
    choucroute picon kouglof carola
    wurscht picon kouglof carola
    wurscht picon kouglof
    lorem
    elsass
    ipsum
    bière
    choucroute
    picon
    kouglof
    carola
    wurscht
    choucroute
    picon
    kouglof
    carola
    wurscht
    .flex-container {
    display: flex;
    }
    .premier {
    /* rien de spécial */
    }
    .deuxieme {
    width: 50%;
    }

    View Slide

  90. lorem elsass ipsum bière
    choucroute picon kouglof carola
    wurscht knacks grumbere hopla
    gal !
    lorem elsass ipsum bière
    choucroute picon kouglof carola
    wurscht picon kouglof carola
    wurscht picon kouglof
    lorem
    elsass
    ipsum
    bière
    choucroute
    picon
    kouglof
    carola
    wurscht
    choucroute
    picon
    kouglof
    carola
    wurscht
    .flex-container {
    display: flex;
    }
    .premier {
    /* rien de spécial */
    }
    .deuxieme {
    width: 50%;
    }
    flex: 0 1 auto;

    View Slide

  91. lorem elsass ipsum bière
    choucroute picon kouglof carola
    wurscht knacks grumbere hopla
    gal !
    lorem elsass ipsum bière
    choucroute picon kouglof carola
    wurscht picon kouglof carola
    wurscht picon kouglof
    lorem
    elsass
    ipsum
    bière
    choucroute
    picon
    kouglof
    carola
    wurscht
    choucroute
    picon
    kouglof
    carola
    wurscht
    .flex-container {
    display: flex;
    }
    .premier {
    /* rien de spécial */
    }
    .deuxieme {
    width: 50%;
    }
    flex: 0 1 auto; flex: 0 1 auto 50%;

    View Slide

  92. .flex-container {
    display: flex;
    }
    .premier {
    width: 50%;
    }
    .deuxieme {
    width: 50%;
    }
    flex: 0 1 auto 50%; flex: 0 1 auto 50%;
    lorem elsass ipsum
    bière choucroute
    picon kouglof carola
    wurscht knacks
    grumbere hopla gal !
    lorem elsass ipsum
    bière choucroute
    picon kouglof carola
    wurscht picon kouglof
    carola wurscht picon
    kouglof
    lorem elsass ipsum
    bière choucroute
    picon kouglof carola
    wurscht choucroute
    picon kouglof carola
    wurscht

    View Slide

  93. .flex-container {
    display: flex;
    }
    .premier {
    flex: 1;
    }
    .deuxieme {
    flex: 1;
    }
    flex: 1 1 auto 0; flex: 1 1 auto 0;
    lorem elsass ipsum
    bière choucroute
    picon kouglof carola
    wurscht knacks
    grumbere hopla gal !
    lorem elsass ipsum
    bière choucroute
    picon kouglof carola
    wurscht picon kouglof
    carola wurscht picon
    kouglof
    lorem elsass ipsum
    bière choucroute
    picon kouglof carola
    wurscht choucroute
    picon kouglof carola
    wurscht

    View Slide

  94. FLEXBOX EST
    BIZARRE
    certains « bugs » n’en sont pas !
    3

    View Slide

  95. nan mais en
    vrai, Flexbox
    c’est quand
    même
    vachement
    bien !

    View Slide

  96. FLEXBOX SAIT ALIGNER
    FLEXBOX EST RAPIDE
    FLEXBOX EST FLUIDE

    View Slide

  97. View Slide

  98. View Slide

  99. maintenant I know Flexbox
    OK
    … jusqu’à demain

    View Slide

  100. MERCI !
    @goetter alsacreations.fr
    Raphaël Goetter
    présentation disponible sur :
    https://speakerdeck.com/goetter

    View Slide