FLEXROxby 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;  
}
.parent  {  
display:  flex;  
flex-­‐direction:  row;  
}
axe principal
=
horizontal
Salade Tomate Oignon Picon bière
.parent  {  
display:  flex;  
flex-­‐direction:  row-­‐reverse;  
}
SaladeTomateOignonPicon bière
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>
t’en as pas marge !?
Salade Tomate Oignon Picon bière
.parent  {  
display:  flex;  
}
Salade Tomate Oignon Picon bière
.parent  {  
display:  flex;  
}  
.picon-­‐bière  {  
margin-­‐left:  auto;  
}
Salade Tomate Oignon Picon bière
.parent  {  
display:  flex;  
}  
.oignon{  
margin-­‐left:  auto;  
}
header
content

lorem schnapsum hopla

choucroute saucisse
footer
body  {  
display:  flex;  
flex-­‐direction:  column;  ...
header
content

lorem schnapsum hopla

choucroute saucisse
footer
body  {  
display:  flex;  
flex-­‐direction:  column;  ...
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-­‐grow,  flex-­‐shrink,  flex-­‐basis
Picon bière
.parent  {  
display:  flex;  
}  
.picon-­‐biere  {  
width:  200px;  
}
flex-grow
Picon bière
.parent  {  
display:  flex;  
}  
.picon-­‐biere  {  
width:  200px;  
flex-­‐grow:  1;  
}
flex-grow
Picon bière
.parent  {  
display:  flex;  
}  
.picon-­‐biere  {  
width:  200px;  
}
flex-shrink
Picon bière
.parent  {  
display:  flex;  
}  
.picon-­‐biere  {  
width:  200px;  
flex-­‐shrink:  1;  
}
flex-shrink
Picon bière
.parent  {  
display:  flex;  
}  
.picon-­‐biere  {  
flex-­‐basis:  200px;  
}
flex-basis
Picon bière
.parent  {  
display:  flex;  
}  
.picon-­‐biere  {  
flex-­‐basis:  200px;  
flex-­‐grow:  1;  
}
flex-basis
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;  
}
flexibilité à tous les
étages
enfant 2

lorem schnapsum hopla

choucroute saucisse
.parent  {  
display:  flex;  
}  
.enfant-­‐1,

.enfant-­‐2  {  
wid...
enfant 2

lorem schnapsum
hopla

choucroute saucisse
.parent  {  
display:  flex;  
}  
.enfant-­‐1,

.enfant-­‐2  {  
wid...
enfant 2

lorem
schnapsum
hopla

choucroute
saucisse
.parent  {  
display:  flex;  
}  
.enfant-­‐1,

.enfant-­‐2  {  
wid...
‟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
flexbox, 

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

en prod ?
ouais
(avec des précautions : Autoprefixer ♥ )
(la preuve)
ressources
http://philipwalton.github.io/solved-by-flexbox/http://flexboxgrid.com/http://the-echoplex.net/flexyboxes/http://jackintheflex...
https://github.com/philipwalton/flexbugs
(et surtout)
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
×

FlexRox

908 vues

Publié le

Intervention de Raphaël GOETTER lors de la conférence WebDesign #2

Publié dans : Design
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

FlexRox

  1. 1. FLEXROxby 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. .parent  {   display:  flex;   flex-­‐direction:  row;   } axe principal = horizontal Salade Tomate Oignon Picon bière
  30. 30. .parent  {   display:  flex;   flex-­‐direction:  row-­‐reverse;   } SaladeTomateOignonPicon bière
  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. t’en as pas marge !?
  65. 65. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   }
  66. 66. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   }   .picon-­‐bière  {   margin-­‐left:  auto;   }
  67. 67. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   }   .oignon{   margin-­‐left:  auto;   }
  68. 68. header content
 lorem schnapsum hopla
 choucroute saucisse footer body  {   display:  flex;   flex-­‐direction:  column;   }
  69. 69. header content
 lorem schnapsum hopla
 choucroute saucisse footer body  {   display:  flex;   flex-­‐direction:  column;   }   footer  {   margin-­‐top:  auto;   }
  70. 70. mais en fait…
  71. 71. flexbox est bi !
  72. 72. Picon bière .parent  {   display:  flex;   } .picon-­‐biere  {   margin:  auto;   } Codepen or didn’t happen (margin-auto) PICON BIÈRE !
  73. 73. flexibilité
  74. 74. flexibilité flex-­‐grow,  flex-­‐shrink,  flex-­‐basis
  75. 75. Picon bière .parent  {   display:  flex;   }   .picon-­‐biere  {   width:  200px;   } flex-grow
  76. 76. Picon bière .parent  {   display:  flex;   }   .picon-­‐biere  {   width:  200px;   flex-­‐grow:  1;   } flex-grow
  77. 77. Picon bière .parent  {   display:  flex;   }   .picon-­‐biere  {   width:  200px;   } flex-shrink
  78. 78. Picon bière .parent  {   display:  flex;   }   .picon-­‐biere  {   width:  200px;   flex-­‐shrink:  1;   } flex-shrink
  79. 79. Picon bière .parent  {   display:  flex;   }   .picon-­‐biere  {   flex-­‐basis:  200px;   } flex-basis
  80. 80. Picon bière .parent  {   display:  flex;   }   .picon-­‐biere  {   flex-­‐basis:  200px;   flex-­‐grow:  1;   } flex-basis
  81. 81. 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)
  82. 82. Salade Tomate Oignon Picon bière .parent  {   display:  flex;   flex-­‐direction:  column;   }
  83. 83. Salade Tomate Oignon Picon bière .oignon  {   flex:  1;   }
  84. 84. Salade Tomate Oignon Picon bière .oignon  {   flex:  1;   } .tomate  {   flex:  1;   } 50% 50%
  85. 85. Salade Tomate Oignon Picon bière .oignon  {   flex:  1;   } .tomate  {   flex:  2;   } 2/3 1/3
  86. 86. exemple vite fait ?
  87. 87. accueil société contact picon nav  a  {   flex:  1;   } nav  a:hover  {   flex:  2;   }
  88. 88. accueil société contact picon nav  a  {   flex:  1;   } nav  a:hover  {   flex:  2;   }
  89. 89. flexibilité à tous les étages
  90. 90. enfant 2
 lorem schnapsum hopla
 choucroute saucisse .parent  {   display:  flex;   }   .enfant-­‐1,
 .enfant-­‐2  {   width:  50%;   } enfant 1
 lorem schnapsum hopla
 choucroute saucisse
 picon knack
  91. 91. enfant 2
 lorem schnapsum hopla
 choucroute saucisse .parent  {   display:  flex;   }   .enfant-­‐1,
 .enfant-­‐2  {   width:  50%;   } enfant 1
 lorem schnapsum hopla
 choucroute saucisse
 picon knack .enfant-­‐1  {   margin-­‐right:  50px;   }
  92. 92. enfant 2
 lorem schnapsum hopla
 choucroute saucisse .parent  {   display:  flex;   }   .enfant-­‐1,
 .enfant-­‐2  {   width:  50%;   } enfant 1
 lorem schnapsum hopla
 choucroute saucisse
 picon knack .enfant-­‐1  {   margin-­‐right:  250px;   } (et ouais parce que
 par défaut, flex-shrink vaut 1)
  93. 93. ‟Non, un « gabarit élastique » n’est pas qu’un acteur de films pour adultes — Clarisse Morgane, contorsionniste </flexibilité>
  94. 94. résumé
  95. 95. distribution ordonnancement alignement flexibilité
  96. 96. distribution ordonnancement alignement flexibilité flex-­‐direction  (défaut  =  row)
  97. 97. distribution ordonnancement alignement flexibilité order  (défaut  =  0)
  98. 98. distribution ordonnancement alignement flexibilité justify-­‐content  (défaut  =  flex-­‐start) align-­‐items  (défaut  =  stretch) align-­‐self  (défaut  =  auto)
  99. 99. 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)
  100. 100. un template en 5min
  101. 101. ouais
  102. 102. header nav content footer body .wrapper
  103. 103. header nav content footer body  {   min-­‐height:  100vh;   } IE9+
 #lesavieztu?
  104. 104. header nav content footer body  {   display:  flex;   flex-­‐direction:  column;   flex-­‐wrap:  wrap;   } min-­‐height
  105. 105. header nav content footer body min-­‐height display flex-­‐direction flex-­‐wrap } .wrapper  {   flex:  1;   }
  106. 106. header nav content footer body min-­‐height display flex-­‐direction flex-­‐wrap } .wrapper flex } display:  flex;
  107. 107. header nav content footer body min-­‐height display flex-­‐direction flex-­‐wrap } .wrapper display flex } .content  {   flex:  1;   }
  108. 108. .wrapper  {   display:  flex;   display:  block;   } header nav content footer petit écran ?
  109. 109. header nav content footer Flexbox t’aide à construire des mondes merveilleux ! JTM ♥ .wrapper  {   display:  flex;   flex-­‐direction:  column;   } nav  {   order:  1;   } petit écran ?
  110. 110. Job’s done Codepen or didn’t happen (template)
  111. 111. ‟Bien sûr que flexbox vous aide à protéger vos données personnelles sur Facebook ! — Marcello Zuckerberg, Community Manager
  112. 112. flexbox, 
 une révolution ?
  113. 113. ouais
  114. 114. flexbox, le futur du positionnement ?
  115. 115. ça dépend®©™
  116. 116. flexbox, 
 en prod ?
  117. 117. ouais (avec des précautions : Autoprefixer ♥ )
  118. 118. (la preuve)
  119. 119. ressources
  120. 120. http://philipwalton.github.io/solved-by-flexbox/http://flexboxgrid.com/http://the-echoplex.net/flexyboxes/http://jackintheflexbox.tumblr.com/
  121. 121. https://github.com/philipwalton/flexbugs (et surtout)
  122. 122. Flexbox all the things !
  123. 123. merci et @goetter Icônes browsers « Pony »: Safari / Opera by McSadat Chrome by he4rtofcourage IE by McSadat Firefox by NoReasonToHope raphaël BISOU ♥

×