Flexbox, place à la gueule de bois !

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.

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

November 10, 2016
Tweet

Transcript

  1. PLACE À LA FLEXBOX GUEULE DE BOIS !

  2. Source : Nick Marchenko (Twitter) FLEXBOX
 DANS TES RÊVES :

    FLEXBOX
 DANS TON NAVIGATEUR:
  3. Raphaël Goetter

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

    toi ?
  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
  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
  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%;
  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;
  9. PRIORITÉS COMPLEXES Je suis flex-wrap, dois-je laisser passer flex-shrink ?

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

  11. FIGHT ! width flex-basis

  12. width flex-basis FLEX-BASIS WINS !

  13. flex-basis: auto; width: valeur; flex-basis: valeur; flex-grow | flex-shrink flex-wrap

    max-width min-width PRIORITÉS DANS FLEXBOX
  14. CONCRÈTEMENT ?

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

  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
  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
  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
  19. SUPER « une question de taille… » source image QUIZ

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

  21. .flex-item { flex: 1; width: 250px; } 1000PX flex-grow le

    force à remplir l’espace restant 1000px TAILLE 1
  22. .flex-item { flex-basis: 500px; width: 250px; } 1000px TAILLE 2

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

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

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

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

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

    min-width l’emporte sur width et flex-basis 1000px TAILLE 4
  28. .flex-item { flex-basis: 500px; flex-shrink: 1; min-width: 1250px; } 1000px

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

    min-width l’emporte systématiquement 1000px TAILLE 5
  30. .flex-item { flex-basis: 0; flex-shrink: 0; width: 250px; } 1000px

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

    ⚠ il prend au-moins la taille minimale du contenu 1000px TAILLE 6
  32. 1000px .flex-item { width: 500px; flex-basis: 1250px; min-width: 750px; flex-shrink:

    0; flex-grow: 1; } TAILLE 7
  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
  34. EN DÉTAIL : FLEX-GROW, FLEX-SHRINK, LE CALCUL SAVANT

  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; }
  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; }
  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
  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
  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
  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
  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
  42. 4 on applique simplement la formule (ici pour flex-grow) :

  43. O RLY ?

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

  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
  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
  47. Flexbox t’aide à construire des mondes merveilleux ! ON EN

    A GROW !
  48. LES BUGS DE FLEXBOX Hey salut IE, comment ça va

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

  50. LES INLINE INTERDITS DE FLEX-ITEM les éléments inline (<span>, <a>,

    ::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 :
  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
  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
  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
  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
  55. You shall not use Flexbox. ‟ — Internet Explorer 9

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

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

  58. RATIO D’IMAGE CASSÉ

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

    auto; }
  60. j’ai réduit ma fenêtre div { display: block; } img

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

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

    auto; } j’ai réduit ma fenêtre
  63. div { display: flex; align-items: flex-start; } img { max-width:

    100%; height: auto; }
  64. = Codepen or didn’t happen div { display: flex; align-items:

    flex-start; div { display: flex; flex-direction: column; }
  65. TAILLE MINIMALE http://www.hadoukenshoryuken.com

  66. div { display: flex; } <div>

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

    <p>
  68. <a> http://www.hadoukenshoryuken.com div { display: flex; } p { word-wrap:

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

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

    break-word; min-width: 0; } a { /* rien */ } Codepen or didn’t happen
  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
  72. QUI ? http://www.alsacreations.com/ • éléments « remplacés » : •

    <img> • <object> • <video> • éléments de formulaire : • <input> • <textarea> • et aussi : • <audio>, <canvas> • mot longs (URL) les flex-items
  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
  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
  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%;
  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
  77. c’est pas tous les jours facile, hein ? :p ‟

    — les spécifications W3C (libre interprétation)
  78. bon alors pourquoi Flexbox c’est quand même vachement bien ?

  79. FLEXBOX ET LES GRILLES source

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

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

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

    .flex-item { flex: 1; }
  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
  84. flex: 1; est une méthode idéale pour une disposition mono-ligne.

    ‟ — moi, à l’instant
  85. Salade Tomate Oignon Picon bière .flex-container { display: flex; }

    (je veux 2 colonnes) .flex-item { flex-basis: calc(100% / 2); }
  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)
  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
  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
  89. None
  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; }
  91. FLEXBOX ET LES PATTERNS

  92. SPACE-BETWEEN 1

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

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

  95. L’OBJET « MEDIA » 2

  96. source : philipwalton

  97. ‟L’objet « media » a fait économiser des 100aines de

    lignes de code sur Facebook. — Nicole Sullivan, OOCSS source
  98. source : dna.fr (2012)

  99. source : lemonde.fr (2016)

  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) :
  101. L’OBJET « AUTOGRID » 3

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

  103. None
  104. ENCORE !

  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) :
  106. ‟L’objet « autogrid » a sauvé 1337 claviers et conservé

    300000 cheveux de développeurs. — Moi, parce que j’adore m’auto-citer
  107. IL VOIT DU FLEXBOX PARTOUT !

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

  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 */ }
  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; }
  111. TWEETDECK .col-header { display: flex; justify-content:
 space-between; } .nav-footer{ margin-top:

    auto; } .media{ /* toi-même tu sais */ }
  112. 3000% DE TEMPS ÉCONOMISÉ FLEX: 1 SPACE-BETWEEN + MARGIN AUTO

    + OBJET MEDIA + OBJET AUTOGRID + (source : Francis Lalanne)
  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)
  114. OK maintenant I know Flexbox … jusqu’à demain

  115. RESSOURCES

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

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

  118. FLEXIBILITY https://github.com/10up/flexibility <script src="flexibility.js"></script> .container { -js-display: flex; display: flex;

    } Flexbox pour IE8 - IE9
  119. FLEXBOX PATTERNS http://www.flexboxpatterns.com/ composants avec Flexbox

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

  121. UNE FORMATION ? formations.alsacreations.fr

  122. MERCI ! @goetter alsacreations.fr