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.

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