La vie en flex

5 676 vues

Publié le

http://www.shivacom.fr
Découvrez le nouveau modèle de boîte Flexbox avec CSS3.

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

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

Aucune remarque pour cette diapositive

La vie en flex

  1. 1. 14/12/2015 VOYEZ LA VIE EN FLEX ! Présenté par b@lix pour Shiva Communication
  2. 2. 14/12/2015 UN PEU D’HISTOIRE...
  3. 3. 14/12/2015 UN PEU D’HISTOIRE... 3 L’intégration il y a 20 ans : <table></table>
  4. 4. 14/12/2015 UN PEU D’HISTOIRE... 4 Bien : ● Comportement liquide/fluide ● Gestion des espaces restants ● Possibilité d’alignement (notamment vertical) ● Blocs de même hauteur Pas bien : ● Mélange le contenu et la mise en forme ● Détournement de la balise <table> ● Difficile à styliser avec des CSS ● Illisible et compliqué à maintenir ● Alourdi le code et les performances La mise en page avec des tableaux, c’est bien et… c’est pas bien !
  5. 5. 14/12/2015 UN PEU D’HISTOIRE... 5 L’intégration il y a 10 ans : <div></div> + CSS
  6. 6. 14/12/2015 UN PEU D’HISTOIRE... 6 Bien : ● Séparation du contenu et de la mise en forme ● Simple à styliser ● Cohérence graphique entre toutes les pages ● Maintenabilité et lisibilité du code ● Meilleure sémantique Pas bien : ● Les éléments doivent régulièrement être sortis du flux ● Impossible de faire des colonnes de même hauteur ● La croix et la bannière pour centrer des éléments à la verticale ● Gestion laborieuse de la largeur et la hauteur des éléments fluides ● “Divite” voire “divite aiguë” ! La mise en page avec des blocs et des CSS, c’est mieux mais… c’est pas encore ça !
  7. 7. 14/12/2015 UN PEU D’HISTOIRE... 7 DÉSESPOIR !!!
  8. 8. 14/12/2015 8 THIS IS A REVOLUTION ! UN PEU D’HISTOIRE... Puis Flexbox est arrivé et comme dirait Steve...
  9. 9. 14/12/2015 UN PEU D’HISTOIRE... 9 Une histoire quelque peu mouvementée ! ● 2008 : premier travaux du groupe de travail du W3C ● 2009 : première spécification utilisant le préfixe box- (display:box) ● 2011: évolution de la spécification qui introduit la notion de conteneur flexbox (display:flexbox) ● 2012 : spécification actuelle (display:flex) ● 2014 : “Last Call Working Draft” au W3C
  10. 10. 14/12/2015 FLEXBOX, KÉZAKO ?
  11. 11. 14/12/2015 FLEXBOX, KÉZAKO ? 11 Nouveau modèle de boîte CSS3 (CSS Flexible Box Layout Module)
  12. 12. 14/12/2015 FLEXBOX, KÉZAKO ? 12 Flexible, adjectif 1. Qui se laisse plier facilement sans se rompre. 2. Qui peut s'adapter aux circonstances. Le “Modèle de boîte flexible” ou flexbox issue du CSS3 est une mise en page qui fournit une disposition des éléments de la page de sorte que ceux-ci possèdent un comportement prévisible lorsque l'agencement de la page doit s'adapter en fonction des tailles d'écrans et des différents appareils.
  13. 13. 14/12/2015 FLEXBOX, KÉZAKO ? 13 Flexbox a des Super-pouvoirs ! ● Distribution des éléments horizontale ou verticale, avec passage à la ligne autorisé ou non. ● Alignements et centrages horizontaux et verticaux, justifiés, répartis. ● Réorganisation des éléments indépendamment de l’ordre du flux (DOM). ● Gestion des espaces disponibles (fluidité).
  14. 14. 14/12/2015 COMMENT ÇA MARCHE, DOC ?
  15. 15. 14/12/2015 COMMENT ÇA MARCHE DOC ? 15 ● Un axe principal (main axis) ● Un axe secondaire (cross axis) ● Un conteneur flex (Flex container) ● Des éléments flex (Flex item) ● Des directions pour chaque axe (start/end) Le principe
  16. 16. 14/12/2015 COMMENT ÇA MARCHE DOC ? 16 Conteneur flex élément flex display flex | inline-flex CSS .flex-container { display: flex; }
  17. 17. 14/12/2015 COMMENT ÇA MARCHE DOC ? 17 1 2 3 4 flex-direction row | row-reverse | column | column-reverse CSS .flex-container { flex-direction: row; }
  18. 18. 14/12/2015 COMMENT ÇA MARCHE DOC ? 18 flex-direction row | row-reverse | column | column-reverse 4 3 2 1 CSS .flex-container { flex-direction: row-reverse; }
  19. 19. 14/12/2015 COMMENT ÇA MARCHE DOC ? 19 1 2 3 4 flex-direction row | row-reverse | column | column-reverse CSS .flex-container { flex-direction: column; }
  20. 20. 14/12/2015 COMMENT ÇA MARCHE DOC ? 20 4 3 2 1 flex-direction row | row-reverse | column | column-reverse CSS .flex-container { flex-direction: column-reverse; }
  21. 21. 14/12/2015 COMMENT ÇA MARCHE DOC ? 21 flex-wrap nowrap | wrap | wrap-reverse 1 2 3 4 5 6 7 8 9 10 11 12 CSS .flex-container { flex-wrap: nowrap; }
  22. 22. 14/12/2015 COMMENT ÇA MARCHE DOC ? 22 flex-wrap nowrap | wrap | wrap-reverse 1 2 3 4 5 6 7 8 9 10 11 12 CSS .flex-container { flex-wrap: wrap; }
  23. 23. 14/12/2015 COMMENT ÇA MARCHE DOC ? 23 flex-flow flex-direction flex-wrap Raccourci pour définir à la fois les propriétés flex-direction et flex-wrap CSS .flex-container { flex-flow: row wrap; }
  24. 24. 14/12/2015 COMMENT ÇA MARCHE DOC ? 24 Et le positionnement dans tout ça ?
  25. 25. 14/12/2015 COMMENT ÇA MARCHE DOC ? 25 justify-content Alignement sur l’axe principal ● flex-start ● flex-end ● center ● space-between ● space-around
  26. 26. 14/12/2015 COMMENT ÇA MARCHE DOC ? 26 justify-content flex-start | flex-end | center | space-between | space-around 1 2 3 4 CSS .flex-container { justify-content: flex-start; }
  27. 27. 14/12/2015 COMMENT ÇA MARCHE DOC ? 27 justify-content flex-start | flex-end | center | space-between | space-around 1 2 3 4 CSS .flex-container { justify-content: flex-end; }
  28. 28. 14/12/2015 COMMENT ÇA MARCHE DOC ? 28 justify-content flex-start | flex-end | center | space-between | space-around 1 2 3 4 CSS .flex-container { justify-content: center; }
  29. 29. 14/12/2015 COMMENT ÇA MARCHE DOC ? 29 justify-content flex-start | flex-end | center | space-between | space-around 1 2 3 4 CSS .flex-container { justify-content: space-between; }
  30. 30. 14/12/2015 COMMENT ÇA MARCHE DOC ? 30 justify-content flex-start | flex-end | center | space-between | space-around 1 2 3 4 CSS .flex-container { justify-content: space-around; }
  31. 31. 14/12/2015 COMMENT ÇA MARCHE DOC ? 31 align-items Alignement sur l’axe secondaire ● flex-start ● flex-end ● center ● baseline ● stretch
  32. 32. 14/12/2015 COMMENT ÇA MARCHE DOC ? 32 align-items flex-start | flex-end | center | baseline | stretch 1 2 3 4 CSS .flex-container { align-items: flex-start; }
  33. 33. 14/12/2015 COMMENT ÇA MARCHE DOC ? 33 align-items flex-start | flex-end | center | baseline | stretch 1 2 3 4 CSS .flex-container { align-items: flex-end; }
  34. 34. 14/12/2015 COMMENT ÇA MARCHE DOC ? 34 align-items flex-start | flex-end | center | baseline | stretch 1 2 3 4 CSS .flex-container { align-items: center; }
  35. 35. 14/12/2015 COMMENT ÇA MARCHE DOC ? 35 align-items flex-start | flex-end | center | baseline | stretch content content content content CSS .flex-container { align-items: baseline; }
  36. 36. 14/12/2015 COMMENT ÇA MARCHE DOC ? 36 align-items flex-start | flex-end | center | baseline | stretch 1 2 3 4 CSS .flex-container { align-items: stretch; }
  37. 37. 14/12/2015 COMMENT ÇA MARCHE DOC ? 37 align-content Alignement des lignes du conteneur flex (ne fonctionne uniquement s’il y’a plusieurs lignes) ● flex-start ● flex-end ● center ● space-between ● space-around ● stretch
  38. 38. 14/12/2015 COMMENT ÇA MARCHE DOC ? 38 align-content flex-start | flex-end | center | space-between | space-around | stretch CSS .flex-container { align-content: flex-start; }
  39. 39. 14/12/2015 COMMENT ÇA MARCHE DOC ? 39 align-content flex-start | flex-end | center | space-between | space-around | stretch CSS .flex-container { align-content: flex-end; }
  40. 40. 14/12/2015 COMMENT ÇA MARCHE DOC ? 40 align-content flex-start | flex-end | center | space-between | space-around | stretch CSS .flex-container { align-content: center; }
  41. 41. 14/12/2015 COMMENT ÇA MARCHE DOC ? 41 align-content flex-start | flex-end | center | space-between | space-around | stretch CSS .flex-container { align-content: space-between; }
  42. 42. 14/12/2015 COMMENT ÇA MARCHE DOC ? 42 align-content flex-start | flex-end | center | space-between | space-around | stretch CSS .flex-container { align-content: space-around; }
  43. 43. 14/12/2015 COMMENT ÇA MARCHE DOC ? 43 align-content flex-start | flex-end | center | space-between | space-around | stretch CSS .flex-container { align-content: stretch; }
  44. 44. 14/12/2015 COMMENT ÇA MARCHE DOC ? 44 Propriétés spécifiques aux items flex
  45. 45. 14/12/2015 COMMENT ÇA MARCHE DOC ? 45 order CSS .flex-item { order: <integer>; } 3 order: -1 1 order: 0 4 order: 1 2 order: 2
  46. 46. 14/12/2015 COMMENT ÇA MARCHE DOC ? 46 flex-grow (facteur d’étirement) CSS .flex-item { flex-grow: <number>; } 1 flex-grow: 1 2 flex-grow: 1 3 flex-grow: 1 4 flex-grow: 1 5 flex-grow: 1 6 flex-grow: 1 1 flex-grow: 1 2 flex-grow: 3 3 flex-grow: 1 4 flex-grow: 1 5 flex-grow: 1 6 flex-grow: 1
  47. 47. 14/12/2015 COMMENT ÇA MARCHE DOC ? 47 flex-shrink (facteur de contraction) CSS .flex-item { flex-shrink: <number>; } 1 flex-shrink: 1 2 flex-shrink: 1 3 flex-shrink: 1 4 flex-shrink: 1 1 flex-shrink: 1 2 flex-shrink: 2 3 flex-shrink: 1 4 flex-shrink: 1
  48. 48. 14/12/2015 COMMENT ÇA MARCHE DOC ? 48 flex-basis (valeur de la taille initiale) CSS .flex-item { flex-basis: auto | <width>; } 1 flex-basis : auto 2 flex-basis : 350px 3 flex-basis : auto 4 flex-basis : auto
  49. 49. 14/12/2015 COMMENT ÇA MARCHE DOC ? 49 flex flex-grow flex-shrink flex-basis Raccourci pour définir à la fois les propriétés flex-grow, flex-shrink et flex-basis CSS .flex-container { flex: 2 1 350px; }
  50. 50. 14/12/2015 COMMENT ÇA MARCHE DOC ? 50 align-self auto | flex-start | flex-end | center | baseline | stretch CSS .flex-item { align-self: flex-end; }
  51. 51. 14/12/2015 EXEMPLES CONCRETS !
  52. 52. 14/12/2015 COMMENT ÇA MARCHE DOC ? 52 Modèle de page
  53. 53. 14/12/2015 COMMENT ÇA MARCHE DOC ? 53 Menu extensible
  54. 54. 14/12/2015 COMMENT ÇA MARCHE DOC ? 54 Système de grille
  55. 55. 14/12/2015 COMMENT ÇA MARCHE DOC ? 55 Galerie d’images
  56. 56. 14/12/2015 COMMENT ÇA MARCHE DOC ? 56 Mise en page d’articles
  57. 57. 14/12/2015 ET LA COMPATIBILITÉ DANS TOUT ÇA ? 57 FirefoxIE10+ avec préfixe -ms pour IE10 Opera Safari avec préfixe - webkit Chrome iOS Android
  58. 58. 14/12/2015 COMMENT ÇA MARCHE DOC ? 58 NICE !!!
  59. 59. 14/12/2015 RESSOURCES 59 ● Spécifications du W3C : http://www.w3.org/TR/css-flexbox/ ● Support navigateurs : http://caniuse.com/flexbox ● Article de la fondation Mozilla : https://developer.mozilla.org/fr/docs/Web/Guide/CSS/Flexible_boxes ● Visual Guide to CSS3 Flexbox Properties : https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties ● Guide complet par CSS-TRICKS : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ● Flexbox, guide complet par Chris Coyier : http://la-cascade.ghost.io/flexbox-guide-complet/ ● Flexy boxes (flexbox playground and code generator) : http://the-echoplex.net/flexyboxes/ ● Jack in the flexbox (Raphael Goetter) : http://jackintheflexbox.tumblr.com/
  60. 60. 14/12/2015 DES QUESTIONS ? 60 En vous remerkiant ! Présenté par b@lix info@shivacom.fr www.shivacom.fr

×