Flexbox, place à la gueule de bois !

Vous commencez votre premier projet en Flexbox ? Bravo, c'est la fête !

On vous avait convaincu que Flexbox était "cool", qu'il allait révolutionner le webdesign. On vous avait carrément vendu du rêve.

Du coup, vous twittez partout que float est mort, que vous aimez à nouveau CSS, vous vous lâchez, écrivez EN CAPSLOCK, envoyez des gifs de licornes à vos collègues et avez vidé votre deuxième bouteille de Dark Dog.

Puis bizarrement, vous commencez à avoir un peu mal aux cheveux. Ça tourne un peu parfois. Vous vous surprenez à vous complaindre de bugs navigateurs, de comportements incohérents.
Nan mais sérieusement, pourquoi des fois ça marche et des fois pas ?! Et pourquoi mes trucs responsive sont tout cassés maintenant ?! Ah oui, et pourquoi flex-grow: 1 c'est pas pareil que flex: 1 ??

Et là, paf ! C'est la gueule de bois. Imparable. Avec les nausées et tout ce qui va avec. Mauvais trip. Envie de retourner intégrer des newsletters ou de se remettre à Bootstrap.

Découvrons ensemble comment nous en remettre en selle, franchissons un nouveau cap avec Flexbox et débarrassons de cette migraine.

Transcript

1. PLACE À LA
   FLEXBOX
   GUEULE DE BOIS !
   

   View Slide

2. Source : Nick Marchenko (Twitter)
   FLEXBOX

   DANS TES RÊVES :
   FLEXBOX

   DANS TON NAVIGATEUR:
   

   View Slide

3. Raphaël Goetter
   

   View Slide

4. FLEXBOX CHEAT SHEET
   parce que tu connais toutes les propriétés, toi ?
   

   View Slide

5. FLEX CONTAINER 1/2
   display: flex;
   display: inline-flex;
   flex-wrap: nowrap;
   flex-wrap: wrap;
   flex-wrap: wrap-reverse;
   flex-direction: row;
   flex-direction: row-reverse;
   flex-direction: column;
   flex-direction: column-reverse;
   justify-content: flex-start;
   justify-content: center;
   justify-content: flex-end;
   justify-content: space-between;
   justify-content: space-around;
   BONUS : 

   flex-flow → flex-direction + flex-wrap
   

   View Slide

6. align-items: flex-start;
   align-items: center;
   align-items: flex-end;
   align-items: stretch;
   align-items: baseline;
   align-content: flex-start;
   align-content: center;
   align-content: flex-end;
   align-content: space-between;
   align-content: space-around;
   align-content: stretch;
   FLEX CONTAINER 2/2
   

   View Slide

7. FLEX ITEM
   order: 0;
   order: 1;
   order: -1;
   source : http://apps.workflower.fi/css-cheats/?name=flexbox
   align-self: auto;
   align-self: flex-start;
   align-self: center;
   align-self: flex-end;
   align-self: baseline;
   align-self: stretch;
   justify-self ? → nope
   flex-grow: 0;
   flex-grow: 1;
   flex-shrink: 0;
   flex-shrink: 1;
   flex-basis: auto;
   flex-basis: 50%;
   

   View Slide

8. QUIZ !
   quelle est la valeur par défaut de flex ?
   flex: auto;
   flex: 1;
   flex: 0;
   flex: 0 1 0;
   flex: 1 1 auto;
   flex: 0 1 auto;
   

   View Slide

9. PRIORITÉS COMPLEXES
   Je suis flex-wrap, dois-je laisser passer flex-shrink ?
   

   View Slide

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

    View Slide

11. FIGHT !
    width flex-basis
    

    View Slide

12. width
    flex-basis
    FLEX-BASIS WINS !
    

    View Slide

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

    View Slide

14. CONCRÈTEMENT ?
    

    View Slide

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

    View Slide

16. 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

17. .flex-container {
    display: flex;
    }
    .flex-item {
    width: 150%
    }
    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

18. 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: 150%
    }
    Salade
    Tomate
    Oignon
    Picon bière
    

    View Slide

19. SUPER
    « une question de taille… »
    source image
    QUIZ !
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. 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

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

    View Slide

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

    View Slide

30. .flex-item {
    flex-basis: 0;
    flex-shrink: 0;
    width: 250px;
    }
    1000px
    TAILLE 6
    

    View Slide

31. 0
    .flex-item {
    flex-basis: 0;
    flex-shrink: 0;
    width: 250px;
    }
    ⚠ il prend au-moins la taille minimale du contenu
    1000px
    TAILLE 6
    

    View Slide

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

    View Slide

33. 1250PX
    flex-basis (et min-width) s’appliquent
    .flex-item {
    width: 500px;
    flex-basis: 1250px;
    min-width: 750px;
    flex-shrink: 0;
    flex-grow: 1;
    }
    1000px
    TAILLE 7
    

    View Slide

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

    View Slide

35. 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

36. 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

37. 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

38. 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

39. 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

40. 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

41. 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

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

    View Slide

43. O RLY ?
    

    View Slide

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

    View Slide

45. 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

46. 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

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

    View Slide

48. LES BUGS DE FLEXBOX
    Hey salut IE, comment ça va bien ?
    

    View Slide

49. FLEXBUGS
    la bible des bugs de Flexbox
    https://github.com/philipwalton/flexbugs
    

    View Slide

50. LES INLINE INTERDITS DE FLEX-ITEM
    les éléments inline (, , ::before, ::after, …) ne sont pas
    traités comme des flex-items
    1
    IE10 - IE11
    symptôme :
    appliquer un display: inline-block; ou block ou flex sur les éléments
    inline
    solution :
    concerne :
    

    View Slide

51. PAS DE BOX-SIZING DANS FLEX-BASIS
    le modèle de boîte box-sizing: border-box n’est pas appliqué sur la
    propriété flex-basis. Les padding et border s’ajoutent donc à la taille.
    IE10 - IE11
    symptôme :
    remplacer flex-basis par width ou height, ou ajouter un conteneur
    supplémentaire sans padding / border
    solution :
    concerne :
    2
    

    View Slide

52. PAS DE CALC () DANS FLEX-BASIS
    calc() n’est pas reconnu au sein de flex-basis ou flex. 

    Exemples : flex:0 0 calc(100%/3) ou flex-basis: calc(100%/3)
    IE10 - IE11
    symptôme :
    ben… pas vraiment, non
    solution :
    concerne :
    3
    

    View Slide

53. UNITÉ DE FLEX-BASIS
    sur IE10-IE11, flex-basis nécessite une unité, même pour la valeur 0 :

    donc flex: 1 1 0; n’est pas reconnu par exemple
    IE10-IE11
    symptôme :
    toujours spécifier une unité à flex-basis, ex. flex: 1 1 0%; et pas flex:
    1 1 0;
    concerne :
    solution :
    4
    

    View Slide

54. VALEUR PAR DÉFAUT DE FLEX-SHRINK
    sur IE10, flex-shrink vaut 0 par défaut et non 1, donc :

    par défaut un flex-item IE10 vaut flex: 0 0 auto; et non flex: 0 1
    auto;
    IE10
    symptôme :
    toujours spécifier la valeur de flex-shrink, ex. flex: 1 1 0%; et pas
    flex: 1;
    solution :
    concerne :
    5
    

    View Slide

55. You shall not use Flexbox.
    ‟ — Internet Explorer 9
    

    View Slide

56. TRUCS BIZARRES, COURANTS,
    PAS VRAIMENT DES BUGS,
    MAIS NÉANMOINS CHIANTS
    DANS FLEXBOX
    

    View Slide

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

    View Slide

58. RATIO D’IMAGE CASSÉ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

64. =
    Codepen or didn’t happen
    div {
    display: flex;
    align-items: flex-start;
    div {
    display: flex;
    flex-direction: column;
    }
    

    View Slide

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

    View Slide

66. div {
    display: flex;
    }
    
    

    View Slide

67. div {
    display: flex;
    }
    p {
    word-wrap: break-word;
    }
    
    

    View Slide

68. 
    http://www.hadoukenshoryuken.com
    div {
    display: flex;
    }
    p {
    word-wrap: break-word;
    }
    a {
    /* rien */
    }
    

    View Slide

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

    View Slide

70. http://www.hadouken

    shoryuken.com
    div {
    display: flex;
    }
    p {
    word-wrap: break-word;
    min-width: 0;
    }
    a {
    /* rien */
    }
    Codepen or didn’t happen
    

    View Slide

71. 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

72. QUI ?
    http://www.alsacreations.com/
    • éléments « remplacés » :
    •
    •
    •
    • éléments de formulaire :
    •
    •
    • et aussi :
    • ,
    • mot longs (URL)
    les flex-items
    

    View Slide

73. 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

74. .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

75. 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

76. .flex-container {
    display: flex;
    }
    .premier {
    flex: 1;
    }
    .deuxieme {
    width: 50%;
    }
    flex: 1 1 auto 0; 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

77. c’est pas tous les jours facile,
    hein ? :p
    ‟
    — les spécifications W3C (libre interprétation)
    

    View Slide

78. bon alors
    pourquoi
    Flexbox c’est
    quand même
    vachement
    bien ?
    

    View Slide

79. FLEXBOX ET LES GRILLES
    source
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

83. Salade Tomate Oignon Picon bière
    .flex-container {
    display: flex;
    }
    .flex-item {
    flex: 1;
    }
    .flex-item:not(:first-child) {
    margin-left: 1rem;
    }
    ⚠ pas de multi-lignes possible
    

    View Slide

84. flex: 1; est une méthode
    idéale pour une disposition
    mono-ligne.
    ‟
    — moi, à l’instant
    

    View Slide

85. Salade Tomate Oignon Picon bière
    .flex-container {
    display: flex;
    }
    (je veux 2 colonnes)
    .flex-item {
    flex-basis: calc(100% / 2);
    }
    

    View Slide

86. Salade Tomate
    Oignon Picon bière
    .flex-container {
    display: flex;
    flex-wrap: wrap;
    }
    .flex-item {
    flex-basis: calc(100% / 2);
    }
    (je veux 2 colonnes)
    

    View Slide

87. .flex-container {
    display: flex;
    flex-wrap: wrap;
    }
    .flex-item {
    flex-basis: calc(100% / 3);
    }
    (je veux 3 colonnes)
    Salade Tomate Oignon
    Picon bière
    ❤ pas de whitespace

    ❤ pas de sortie du flux
    

    View Slide

88. ‟Les grilles Flexbox, c’est pas
    parfait mais c’est toujours
    mieux que float et inline-
    block.
    — moi, mais je dis ça je dis rien
    

    View Slide

89. View Slide

90. https://github.com/Heydon/fukol-grids
    la grille de 93 octets
    .fukol-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -0.5em;

    }
    .fukol-grid > * {
    flex: 1 0 10em;
    margin: 0.5em;
    }
    

    View Slide

91. FLEXBOX ET LES PATTERNS
    

    View Slide

92. SPACE-BETWEEN
    1
    

    View Slide

93. .media {
    display: flex;
    justify-content: space-between;
    }
    Flexbox et space-between :
    

    View Slide

94. .header {
    display: flex;
    justify-content: space-between;
    }
    SPACE-BETWEEN ❤
    

    View Slide

95. L’OBJET « MEDIA »
    2
    

    View Slide

96. source : philipwalton
    

    View Slide

97. ‟L’objet « media » a fait
    économiser des 100aines de
    lignes de code sur Facebook.
    — Nicole Sullivan, OOCSS
    source
    

    View Slide

98. source : dna.fr (2012)
    

    View Slide

99. source : lemonde.fr (2016)
    

    View Slide

100. .media {
     display: flex;
     align-items: flex-start;
     }
     .media-body{
     flex: 1;
     }
     Objet « Media » en Flexbox :
     .media--reverse {
     flex-direction: row-reverse;
     }
     .media-figure--center {
     align-self: center;
     }
     Objet « Media » (variantes) :
     

     View Slide

101. L’OBJET « AUTOGRID »
     3
     

     View Slide

102. démo : CodePen
     article sur CSS-tricks
     

     View Slide

103. View Slide

104. ENCORE !
     

     View Slide

105. .autogrid {
     display: flex;
     }
     .autogrid > * {
     flex: 1;
     }
     Objet « Autogrid » :
     .autogrid--gutter > *:not(:first-child) {
     margin-left: 1rem;
     }
     .autogrid-cell--big {
     flex: 2;
     }
     Objet « Autogrid » (variantes) :
     

     View Slide

106. ‟L’objet « autogrid » a sauvé
     1337 claviers et conservé
     300000 cheveux de
     développeurs.
     — Moi, parce que j’adore m’auto-citer
     

     View Slide

107. IL VOIT DU
     FLEXBOX
     PARTOUT !
     

     View Slide

108. PERNOD-RICARD
     .header {
     display: flex;
     justify-content: space-between;
     }
     

     View Slide

109. CDISCOUNT - YAHOO!
     .header {
     display: flex;
     justify-content: space-between;
     }
     .search{
     display: flex;
     }
     .search-input{
     flex: 1;
     min-width: 0;
     }
     .media{
     /* toi-même tu sais */
     }
     

     View Slide

110. ASANA
     .task-header {
     display: flex;
     justify-content: space-between;
     }
     .push-right {
     margin-left: auto;
     }
     .task-item {
     display: flex;
     align-items: center;
     }
     .task-item--is-important{
     order: -1;
     }
     

     View Slide

111. TWEETDECK
     .col-header {
     display: flex;
     justify-content:

     space-between;
     }
     .nav-footer{
     margin-top: auto;
     }
     .media{
     /* toi-même tu sais */
     }
     

     View Slide

112. 3000% DE TEMPS ÉCONOMISÉ
     FLEX: 1
     SPACE-BETWEEN
     +
     MARGIN AUTO
     +
     OBJET MEDIA
     +
     OBJET AUTOGRID
     +
     (source : Francis Lalanne)
     

     View Slide

113. .flex-container {
     display: flex;
     flex-flow: column nowrap;
     align-items: space-between;
     flex-direction: row;
     }

     .flex-item {
     flex: 1;
     display: block;
     align-content: center;
     flex-shrink: 1;
     float: left;
     clear: both;
     z-index: -1;
     bottom: 1em;
     vertical-align: top;
     width: 250px;
     height: 250px;
     }
     QUIZ !
     quelles
     déclarations n’ont
     aucun effet ?
     

     (= ne s’appliquent pas, ou ne
     changent pas les valeurs par
     défaut)
     

     View Slide

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

     View Slide

115. RESSOURCES
     

     View Slide

116. LIVRE FLEXBOX
     http://goetter.fr/livres/flexbox/
     ben ouais fallait bien le caser
     

     View Slide

117. https://github.com/afonsopacifer/awesome-flexbox
     toutes les ressources Flexbox
     AWESOME FLEXBOX
     

     View Slide

118. FLEXIBILITY
     https://github.com/10up/flexibility
     
     .container {
     -js-display: flex;
     display: flex;
     }
     Flexbox pour IE8 - IE9
     

     View Slide

119. FLEXBOX PATTERNS
     http://www.flexboxpatterns.com/
     composants avec Flexbox
     

     View Slide

120. un micro-grille en Flexbox
     GRILLADE
     http://grillade.knacss.com/
     

     View Slide

121. UNE FORMATION ?
     formations.alsacreations.fr
     

     View Slide

122. MERCI !
     @goetter alsacreations.fr
     

     View Slide