by raphaël
Crédit photo © Mathieu Drouet
raphaël goetter
✓ alsacreations.com
✓ goetter.fr
✓ mydevice.io
✓ knacss.com
✓ @goetter
flexbox ?
distribution
ordonnancement
alignement
flexibilité
compatible ?
oui !
(IE 10) (Safari 3.1)(Android 2.1)
(Chrome 4)
(Firefox 2) (Opera 12.1)
(Stats Caniuse France)
standard ?
presque !
erf !
OK, je fais quoi avec ?
Picon bière
mais aussi…
nav content
nav content
nav content
mais aussi…
je suis un pied toujours en bas
je suis un pied toujours en bas
je suis un pied toujours en bas
mais aussi…
moi je suis un gabarit
je prends
toute la
hauteur
de page
je suis fluide et
responsive
et réalisé en quelques minutes
moi je suis un gabarit
je prends
toute la
hauteur
de page
je suis fluide et responsive
et réalisé en quelques minutes
mais ...
avec des
hauteurs
identiques
je suis une
grille en
flexbox
certains de mes éléments
peuvent occuper plusieurs
emplacements
...
kiwi.pdf
tomate.docx
oignon.pptx
salade.pdf
picon.docx
bière.pptx
kiwi.pdf
tomate.docx
oignon.pptx
salade.pdf
picon.docx
b...
en action !
.parent  {  
display:  block;  
}
Salade
Tomate
Oignon
Picon bière
.enfant  {  
display:  block;  
}
Salade Tomate Oignon Picon bière
.parent  {  
display:  flex;  
}
« flex-items »
« flex-container »
display:  block;  
displ...
distribution
distribution
flex-­‐direction
Salade Tomate Oignon Picon bière
.parent  {  
display:  flex;  
}
Salade Tomate Oignon Picon bière
.parent  {  
display:  flex;  
flex-­‐direction:  row;  
}
axe principal
=
horizontal
SaladeTomateOignonPicon bière
.parent  {  
display:  flex;  
flex-­‐direction:  row-­‐reverse;  
}
exemple vite fait ?
.parent  {  
display:  flex;  
flex-­‐direction:  row;  
}
Le module de positionnement CSS3 « Flexbox » introduit
un tout ...
.parent  {  
display:  flex;  
flex-­‐direction:  row-­‐reverse;  
}
Le module de positionnement CSS3 « Flexbox » introdui...
Salade
Tomate
Oignon
Picon bière
.parent  {  
display:  flex;  
flex-­‐direction:  column;  
}
axe principal
=
vertical
Salade
Tomate
Oignon
Picon bière
.parent  {  
display:  flex;  
flex-­‐direction:  column-­‐reverse;  
}
Salade Tomate Oignon Picon bière
.parent  {  
display:  flex;  
}
erf, ça déborde
Salade Tomate Oignon
Picon bière
.parent  {  
display:  flex;  
flex-­‐wrap:  wrap;  
}
Salade Tomate Oignon
Picon bière
.parent  {  
display:  flex;  
flex-­‐wrap:  wrap-­‐reverse;  
}
‟Jesus, inventeur officiel de la
grande distribution (de pains)…
— Chang-Edouard Leclerc, distributeur
</distribution>
ordonnancement
ordonnancement
order
Salade
Tomate
Oignon
Picon bière
.parent  {  
display:  flex;  
flex-­‐direction:  column;  
}
Salade
Tomate
Oignon
Picon bière
.oignon  {  
order:  1;  
}
Salade
Tomate
Oignon
Picon bière
.oignon  {  
order:  1;  
}
.picon-­‐biere  {  
order:  -­‐1;  
}
exemple vite fait ?
Commencer à bosserimportant
Changer de sous-vêtementsimportant
Acheter l’iPhone 6done
Suivre le lapin blanctodo
Prendre un...
Commencer à bosserimportant
Changer de sous-vêtementsimportant
Acheter l’iPhone 6done
Suivre le lapin blanctodo
Prendre un...
‟Quand c’est le bordel dans ma
chambre, j’invoque les 

Forces de l’Ordre !
— Luke Skybloguer, stagiaire Jedi
</ordonnance...
alignement

(axe principal)
alignement

(axe principal)
justify-­‐content
Salade
Tomate
Oignon
Picon bière
.parent  {  
display:  flex;  
flex-­‐direction:  column;  
}
Salade
Tomate
Oignon
Picon bière
.parent  {  
display:  flex;  
flex-­‐direction:  column;  
}
justify-­‐content:  flex-­‐...
Salade
Tomate
Oignon
Picon bière
.parent  {  
display:  flex;  
flex-­‐direction:  column;  
}
justify-­‐content:  center;...
Salade
Tomate
Oignon
Picon bière
.parent  {  
display:  flex;  
flex-­‐direction:  column;  
}
justify-­‐content:  space-­...
alignement

(axe secondaire)
alignement

(axe secondaire)
align-­‐items
Salade
Tomate
Oignon
Picon bière
.parent  {  
display:  flex;  
flex-­‐direction:  column;  
}
.parent  {  
display:  flex;  
flex-­‐direction:  column;  
}
align-­‐items:  flex-­‐start;  
Salade
Tomate
Oignon
Picon b...
Salade
Tomate
Oignon
Picon bière
align-­‐items:  flex-­‐end;  
.parent  {  
display:  flex;  
flex-­‐direction:  column;  ...
Salade
Tomate
Oignon
Picon bière
align-­‐items:  center;  
.parent  {  
display:  flex;  
flex-­‐direction:  column;  
}
Salade
Tomate
Oignon
Picon bière
align-­‐items:  stretch;  
.parent  {  
display:  flex;  
flex-­‐direction:  column;  
}
.parent  {  
display:  flex;  
flex-­‐direction:  column;  
align-­‐items:  stretch;  
}
.oignon  {  
align-­‐self:  flex-...
‟Ça se saurait si on pouvait
centrer verticalement avec
margin: auto !
— Jean-Kévin Bayrou, centriste
</alignement>
mais en fait…
flexbox est bi !
Picon bière
.parent  {  
display:  flex;  
}
.picon-­‐biere  {  
margin:  auto;  
}
Codepen or didn’t happen (margin-auto)...
flexibilité
flexibilité
flex
flex
flex-­‐grow  



capacité  à  s’élargir  
selon  l’espace  
restant



(défaut  =  0)
flex-­‐shrink  



capacité  à  ...
Salade
Tomate
Oignon
Picon bière
.parent  {  
display:  flex;  
flex-­‐direction:  column;  
}
Salade
Tomate
Oignon
Picon bière
.oignon  {  
flex:  1;  
}
Salade
Tomate
Oignon
Picon bière
.oignon  {  
flex:  1;  
}
.tomate  {  
flex:  1;  
}
50%
50%
Salade
Tomate
Oignon
Picon bière
.oignon  {  
flex:  1;  
}
.tomate  {  
flex:  2;  
}
2/3
1/3
exemple vite fait ?
accueil société contact picon
nav  a  {  
flex:  1;  
}
nav  a:hover  {  
flex:  2;  
}
accueil société contact picon
nav  a  {  
flex:  1;  
}
nav  a:hover  {  
flex:  2;  
}
‟Non, un « gabarit élastique »
n’est pas qu’un acteur de films
pour adultes
— Clarisse Morgane, contorsionniste
</flexibili...
résumé
distribution
ordonnancement
alignement
flexibilité
distribution
ordonnancement
alignement
flexibilité
flex-­‐direction  (défaut  =  row)
distribution
ordonnancement
alignement
flexibilité
order  (défaut  =  0)
distribution
ordonnancement
alignement
flexibilité
justify-­‐content  (défaut  =  flex-­‐start)
align-­‐items  (défaut  =  ...
distribution
ordonnancement
alignement
flexibilité
flex  (défaut  =  variable  selon  grow/shrink/basis)
flex-­‐grow  (défa...
un template en 5min
ouais
header
nav
content
footer
body
.wrapper
header
nav
content
footer
body  {  
min-­‐height:  100vh;  
}
IE9+

#lesavieztu?
header
nav
content
footer
body  {  
display:  flex;  
flex-­‐direction:  column;  
flex-­‐wrap:  wrap;  
}
min-­‐height
header
nav
content
footer
body
min-­‐height
display
flex-­‐direction
flex-­‐wrap
}
.wrapper  {  
flex:  1;  
}
header
nav content
footer
body
min-­‐height
display
flex-­‐direction
flex-­‐wrap
}
.wrapper
flex
}
display:  flex;
header
nav content
footer
body
min-­‐height
display
flex-­‐direction
flex-­‐wrap
}
.wrapper
display
flex
}
.content  {  
f...
.wrapper  {  
display:  flex;  
display:  block;  
}
header
nav
content
footer
petit
écran ?
header
nav
content
footer
Flexbox t’aide à
construire des mondes
merveilleux !
JTM ♥
.wrapper  {  
display:  flex;  
flex-...
Job’s done
Codepen or didn’t happen (template)
‟Bien sûr que flexbox vous aide
à protéger vos données
personnelles sur Facebook !
— Marcello Zuckerberg, Community Manager
bonus
BFC !
un float ne déborde pas d’un « flex-container »
un float ne déborde pas d’un « flex-item »
un « flex-container » ne s’écoule pa...
Salade
.parent  {  
display:  block;  
}
.salade  {  
display:  block;  
}
Salade
.parent  {  
display:  block;  
}
.salade  {  
display:  block;  
float:  left;  
}
Salade
.parent  {  
display:  flex;  
}
.salade  {  
display:  block;  
float:  left;  
}
un float ne déborde pas d’un « fle...
nav  {  
display:  block;  
}
.content  {  
display:  block;  
}
nav
content
contentnav nav  {  
float:  left;  
}
.content  {  
display:  block;  
}
un « flex-container » ne s’écoule pas autour d’un float
nav nav  {  
float:  left;  
}
.content  {  
display:  flex;  
}
con...
flexbox, 

une révolution ?
ouais
flexbox, le futur du
positionnement ?
ça dépend®©™
flexbox, 

en prod ?
ouais
(avec des précautions : Autoprefixer ♥ )
ressources
http://philipwalton.github.io/solved-by-flexbox/http://flexboxgrid.com/http://the-echoplex.net/flexyboxes/http://jackintheflex...
Flexbox
all the things !
merci
et
@goetter
Icônes browsers « Pony »:
Safari / Opera by McSadat
Chrome by he4rtofcourage
IE by McSadat
Firefox by No...
Prochain SlideShare
Chargement dans…5
×

Flexbox Révolution

1 117 vues

Publié le

Flexbox représente la nouvelle génération de positionnement CSS3 aux multiples facettes, prêt à l'emploi et au bon goût de Responsive Web Design. Pensé pour faciliter la vie du webdesigner et pour oublier nos cauchemars de centrages verticaux, de hauteurs identiques, de fluidité naturelle, de pieds de pages collés en bas (oui parce qu'on n'est pas tous fétichistes), Flexbox est aujourd'hui supporté par tous les navigateurs récents... même Internet Explorer. Alors, jouable ou pas ? En prod ou ça dépend ? Sommes-nous prêts pour la révolution CSS qu'est Flexbox ?

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 117
Sur SlideShare
0
Issues des intégrations
0
Intégrations
7
Actions
Partages
0
Téléchargements
17
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Flexbox Révolution

  1. 1. by raphaël
  2. 2. Crédit photo © Mathieu Drouet raphaël goetter ✓ alsacreations.com ✓ goetter.fr ✓ mydevice.io ✓ knacss.com ✓ @goetter
  3. 3. flexbox ?
  4. 4. distribution ordonnancement alignement flexibilité
  5. 5. compatible ?
  6. 6. oui ! (IE 10) (Safari 3.1)(Android 2.1) (Chrome 4) (Firefox 2) (Opera 12.1) (Stats Caniuse France)
  7. 7. standard ?
  8. 8. presque !
  9. 9. erf !
  10. 10. OK, je fais quoi avec ?
  11. 11. Picon bière mais aussi…
  12. 12. nav content
  13. 13. nav content
  14. 14. nav content mais aussi…
  15. 15. je suis un pied toujours en bas
  16. 16. je suis un pied toujours en bas
  17. 17. je suis un pied toujours en bas mais aussi…
  18. 18. moi je suis un gabarit je prends toute la hauteur de page je suis fluide et responsive et réalisé en quelques minutes
  19. 19. moi je suis un gabarit je prends toute la hauteur de page je suis fluide et responsive et réalisé en quelques minutes mais aussi…
  20. 20. avec des hauteurs identiques je suis une grille en flexbox certains de mes éléments peuvent occuper plusieurs emplacements et une gouttière définie et je suis fluide et responsive hop, moi je suis calé à droite ! plutôt chouette, non ? mais aussi…
  21. 21. kiwi.pdf tomate.docx oignon.pptx salade.pdf picon.docx bière.pptx kiwi.pdf tomate.docx oignon.pptx salade.pdf picon.docx bière.pptx mais aussi plein d’autres trucs !
  22. 22. en action !
  23. 23. .parent  {   display:  block;   }
  24. 24. Salade Tomate Oignon Picon bière .enfant  {   display:  block;   }
  25. 25. 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;
  26. 26. distribution
  27. 27. distribution flex-­‐direction
  28. 28. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   }
  29. 29. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  row;   } axe principal = horizontal
  30. 30. SaladeTomateOignonPicon bière .parent  {   display:  flex;   flex-­‐direction:  row-­‐reverse;   }
  31. 31. exemple vite fait ?
  32. 32. .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.
  33. 33. .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.
  34. 34. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   } axe principal = vertical
  35. 35. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column-­‐reverse;   }
  36. 36. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   } erf, ça déborde
  37. 37. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐wrap:  wrap;   }
  38. 38. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐wrap:  wrap-­‐reverse;   }
  39. 39. ‟Jesus, inventeur officiel de la grande distribution (de pains)… — Chang-Edouard Leclerc, distributeur </distribution>
  40. 40. ordonnancement
  41. 41. ordonnancement order
  42. 42. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   }
  43. 43. Salade Tomate Oignon Picon bière .oignon  {   order:  1;   }
  44. 44. Salade Tomate Oignon Picon bière .oignon  {   order:  1;   } .picon-­‐biere  {   order:  -­‐1;   }
  45. 45. exemple vite fait ?
  46. 46. Commencer à bosserimportant Changer de sous-vêtementsimportant Acheter l’iPhone 6done Suivre le lapin blanctodo Prendre un dernier picon-bièretodo Arrêter de jouer à HearthStonetodo Ma todo liste !
  47. 47. Commencer à bosserimportant Changer de sous-vêtementsimportant Acheter l’iPhone 6done Suivre le lapin blanctodo Prendre un dernier picon-bièretodo Arrêter de jouer à HearthStonetodo Ma todo liste ! .important  {   order:  -­‐1;   } .done  {   order:  1;   }
  48. 48. ‟Quand c’est le bordel dans ma chambre, j’invoque les 
 Forces de l’Ordre ! — Luke Skybloguer, stagiaire Jedi </ordonnancement>
  49. 49. alignement
 (axe principal)
  50. 50. alignement
 (axe principal) justify-­‐content
  51. 51. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   }
  52. 52. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   } justify-­‐content:  flex-­‐end;  
  53. 53. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   } justify-­‐content:  center;  
  54. 54. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   } justify-­‐content:  space-­‐
 between;  
  55. 55. alignement
 (axe secondaire)
  56. 56. alignement
 (axe secondaire) align-­‐items
  57. 57. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   }
  58. 58. .parent  {   display:  flex;   flex-­‐direction:  column;   } align-­‐items:  flex-­‐start;   Salade Tomate Oignon Picon bière
  59. 59. Salade Tomate Oignon Picon bière align-­‐items:  flex-­‐end;   .parent  {   display:  flex;   flex-­‐direction:  column;   }
  60. 60. Salade Tomate Oignon Picon bière align-­‐items:  center;   .parent  {   display:  flex;   flex-­‐direction:  column;   }
  61. 61. Salade Tomate Oignon Picon bière align-­‐items:  stretch;   .parent  {   display:  flex;   flex-­‐direction:  column;   }
  62. 62. .parent  {   display:  flex;   flex-­‐direction:  column;   align-­‐items:  stretch;   } .oignon  {   align-­‐self:  flex-­‐end;   } Salade Tomate Oignon Picon bière
  63. 63. ‟Ça se saurait si on pouvait centrer verticalement avec margin: auto ! — Jean-Kévin Bayrou, centriste </alignement>
  64. 64. mais en fait…
  65. 65. flexbox est bi !
  66. 66. Picon bière .parent  {   display:  flex;   } .picon-­‐biere  {   margin:  auto;   } Codepen or didn’t happen (margin-auto) PICON BIÈRE !
  67. 67. flexibilité
  68. 68. flexibilité flex
  69. 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  =  main-­‐size  =   auto)
  70. 70. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   }
  71. 71. Salade Tomate Oignon Picon bière .oignon  {   flex:  1;   }
  72. 72. Salade Tomate Oignon Picon bière .oignon  {   flex:  1;   } .tomate  {   flex:  1;   } 50% 50%
  73. 73. Salade Tomate Oignon Picon bière .oignon  {   flex:  1;   } .tomate  {   flex:  2;   } 2/3 1/3
  74. 74. exemple vite fait ?
  75. 75. accueil société contact picon nav  a  {   flex:  1;   } nav  a:hover  {   flex:  2;   }
  76. 76. accueil société contact picon nav  a  {   flex:  1;   } nav  a:hover  {   flex:  2;   }
  77. 77. ‟Non, un « gabarit élastique » n’est pas qu’un acteur de films pour adultes — Clarisse Morgane, contorsionniste </flexibilité>
  78. 78. résumé
  79. 79. distribution ordonnancement alignement flexibilité
  80. 80. distribution ordonnancement alignement flexibilité flex-­‐direction  (défaut  =  row)
  81. 81. distribution ordonnancement alignement flexibilité order  (défaut  =  0)
  82. 82. distribution ordonnancement alignement flexibilité justify-­‐content  (défaut  =  flex-­‐start) align-­‐items  (défaut  =  stretch) align-­‐self  (défaut  =  auto)
  83. 83. 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  =  main-­‐size  =  auto)
  84. 84. un template en 5min
  85. 85. ouais
  86. 86. header nav content footer body .wrapper
  87. 87. header nav content footer body  {   min-­‐height:  100vh;   } IE9+
 #lesavieztu?
  88. 88. header nav content footer body  {   display:  flex;   flex-­‐direction:  column;   flex-­‐wrap:  wrap;   } min-­‐height
  89. 89. header nav content footer body min-­‐height display flex-­‐direction flex-­‐wrap } .wrapper  {   flex:  1;   }
  90. 90. header nav content footer body min-­‐height display flex-­‐direction flex-­‐wrap } .wrapper flex } display:  flex;
  91. 91. header nav content footer body min-­‐height display flex-­‐direction flex-­‐wrap } .wrapper display flex } .content  {   flex:  1;   }
  92. 92. .wrapper  {   display:  flex;   display:  block;   } header nav content footer petit écran ?
  93. 93. header nav content footer Flexbox t’aide à construire des mondes merveilleux ! JTM ♥ .wrapper  {   display:  flex;   flex-­‐direction:  column;   } nav  {   order:  1;   } petit écran ?
  94. 94. Job’s done Codepen or didn’t happen (template)
  95. 95. ‟Bien sûr que flexbox vous aide à protéger vos données personnelles sur Facebook ! — Marcello Zuckerberg, Community Manager
  96. 96. bonus
  97. 97. BFC !
  98. 98. un float ne déborde pas d’un « flex-container » un float ne déborde pas d’un « flex-item » un « flex-container » ne s’écoule pas autour d’un float
  99. 99. Salade .parent  {   display:  block;   } .salade  {   display:  block;   }
  100. 100. Salade .parent  {   display:  block;   } .salade  {   display:  block;   float:  left;   }
  101. 101. Salade .parent  {   display:  flex;   } .salade  {   display:  block;   float:  left;   } un float ne déborde pas d’un « flex-container »
  102. 102. nav  {   display:  block;   } .content  {   display:  block;   } nav content
  103. 103. contentnav nav  {   float:  left;   } .content  {   display:  block;   }
  104. 104. un « flex-container » ne s’écoule pas autour d’un float nav nav  {   float:  left;   } .content  {   display:  flex;   } content Codepen or didn’t happen (BFC)
  105. 105. flexbox, 
 une révolution ?
  106. 106. ouais
  107. 107. flexbox, le futur du positionnement ?
  108. 108. ça dépend®©™
  109. 109. flexbox, 
 en prod ?
  110. 110. ouais (avec des précautions : Autoprefixer ♥ )
  111. 111. ressources
  112. 112. http://philipwalton.github.io/solved-by-flexbox/http://flexboxgrid.com/http://the-echoplex.net/flexyboxes/http://jackintheflexbox.tumblr.com/
  113. 113. Flexbox all the things !
  114. 114. merci et @goetter Icônes browsers « Pony »: Safari / Opera by McSadat Chrome by he4rtofcourage IE by McSadat Firefox by NoReasonToHope raphaël BISOU ♥

×