14/12/2015
VOYEZ
LA VIE EN FLEX !
Présenté par b@lix
pour Shiva Communication
14/12/2015
UN PEU D’HISTOIRE...
14/12/2015
UN PEU D’HISTOIRE...
3
L’intégration il y a 20 ans :
<table></table>
14/12/2015
UN PEU D’HISTOIRE...
4
Bien :
● Comportement liquide/fluide
● Gestion des espaces restants
● Possibilité d’alig...
14/12/2015
UN PEU D’HISTOIRE...
5
L’intégration il y a 10 ans :
<div></div>
+
CSS
14/12/2015
UN PEU D’HISTOIRE...
6
Bien :
● Séparation du contenu et
de la mise en forme
● Simple à styliser
● Cohérence gr...
14/12/2015
UN PEU D’HISTOIRE...
7
DÉSESPOIR !!!
14/12/2015
8
THIS IS A REVOLUTION !
UN PEU D’HISTOIRE...
Puis Flexbox est arrivé et comme dirait Steve...
14/12/2015
UN PEU D’HISTOIRE...
9
Une histoire quelque peu mouvementée !
● 2008 : premier travaux du groupe de travail du ...
14/12/2015
FLEXBOX, KÉZAKO ?
14/12/2015
FLEXBOX, KÉZAKO ?
11
Nouveau modèle de boîte CSS3
(CSS Flexible Box Layout Module)
14/12/2015
FLEXBOX, KÉZAKO ?
12
Flexible, adjectif
1. Qui se laisse plier facilement sans se rompre.
2. Qui peut s'adapter...
14/12/2015
FLEXBOX, KÉZAKO ?
13
Flexbox a des Super-pouvoirs !
● Distribution des éléments horizontale ou verticale, avec
...
14/12/2015
COMMENT ÇA MARCHE,
DOC ?
14/12/2015
COMMENT ÇA MARCHE DOC ?
15
● Un axe principal (main axis)
● Un axe secondaire (cross axis)
● Un conteneur flex ...
14/12/2015
COMMENT ÇA MARCHE DOC ?
16
Conteneur flex
élément flex
display
flex | inline-flex
CSS
.flex-container {
display...
14/12/2015
COMMENT ÇA MARCHE DOC ?
17
1 2 3 4
flex-direction
row | row-reverse | column | column-reverse
CSS
.flex-contain...
14/12/2015
COMMENT ÇA MARCHE DOC ?
18
flex-direction
row | row-reverse | column | column-reverse
4 3 2 1
CSS
.flex-contain...
14/12/2015
COMMENT ÇA MARCHE DOC ?
19
1
2
3
4
flex-direction
row | row-reverse | column | column-reverse
CSS
.flex-contain...
14/12/2015
COMMENT ÇA MARCHE DOC ?
20
4
3
2
1
flex-direction
row | row-reverse | column | column-reverse
CSS
.flex-contain...
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-containe...
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-containe...
14/12/2015
COMMENT ÇA MARCHE DOC ?
23
flex-flow
flex-direction flex-wrap
Raccourci pour définir à la fois les propriétés f...
14/12/2015
COMMENT ÇA MARCHE DOC ?
24
Et le positionnement dans tout ça ?
14/12/2015
COMMENT ÇA MARCHE DOC ?
25
justify-content
Alignement sur l’axe principal
● flex-start
● flex-end
● center
● sp...
14/12/2015
COMMENT ÇA MARCHE DOC ?
26
justify-content
flex-start | flex-end | center | space-between | space-around
1 2 3 ...
14/12/2015
COMMENT ÇA MARCHE DOC ?
27
justify-content
flex-start | flex-end | center | space-between | space-around
1 2 3 ...
14/12/2015
COMMENT ÇA MARCHE DOC ?
28
justify-content
flex-start | flex-end | center | space-between | space-around
1 2 3 ...
14/12/2015
COMMENT ÇA MARCHE DOC ?
29
justify-content
flex-start | flex-end | center | space-between | space-around
1 2 3 ...
14/12/2015
COMMENT ÇA MARCHE DOC ?
30
justify-content
flex-start | flex-end | center | space-between | space-around
1 2 3 ...
14/12/2015
COMMENT ÇA MARCHE DOC ?
31
align-items
Alignement sur l’axe secondaire
● flex-start
● flex-end
● center
● basel...
14/12/2015
COMMENT ÇA MARCHE DOC ?
32
align-items
flex-start | flex-end | center | baseline | stretch
1 2 3 4
CSS
.flex-co...
14/12/2015
COMMENT ÇA MARCHE DOC ?
33
align-items
flex-start | flex-end | center | baseline | stretch
1 2 3 4
CSS
.flex-co...
14/12/2015
COMMENT ÇA MARCHE DOC ?
34
align-items
flex-start | flex-end | center | baseline | stretch
1 2 3 4
CSS
.flex-co...
14/12/2015
COMMENT ÇA MARCHE DOC ?
35
align-items
flex-start | flex-end | center | baseline | stretch
content content cont...
14/12/2015
COMMENT ÇA MARCHE DOC ?
36
align-items
flex-start | flex-end | center | baseline | stretch
1 2 3 4
CSS
.flex-co...
14/12/2015
COMMENT ÇA MARCHE DOC ?
37
align-content
Alignement des lignes du conteneur flex
(ne fonctionne uniquement s’il...
14/12/2015
COMMENT ÇA MARCHE DOC ?
38
align-content
flex-start | flex-end | center | space-between | space-around | stretc...
14/12/2015
COMMENT ÇA MARCHE DOC ?
39
align-content
flex-start | flex-end | center | space-between | space-around | stretc...
14/12/2015
COMMENT ÇA MARCHE DOC ?
40
align-content
flex-start | flex-end | center | space-between | space-around | stretc...
14/12/2015
COMMENT ÇA MARCHE DOC ?
41
align-content
flex-start | flex-end | center | space-between | space-around | stretc...
14/12/2015
COMMENT ÇA MARCHE DOC ?
42
align-content
flex-start | flex-end | center | space-between | space-around | stretc...
14/12/2015
COMMENT ÇA MARCHE DOC ?
43
align-content
flex-start | flex-end | center | space-between | space-around | stretc...
14/12/2015
COMMENT ÇA MARCHE DOC ?
44
Propriétés spécifiques aux items flex
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...
14/12/2015
COMMENT ÇA MARCHE DOC ?
46
flex-grow (facteur d’étirement)
CSS
.flex-item {
flex-grow: <number>;
}
1
flex-grow:...
14/12/2015
COMMENT ÇA MARCHE DOC ?
47
flex-shrink (facteur de contraction)
CSS
.flex-item {
flex-shrink: <number>;
}
1
fle...
14/12/2015
COMMENT ÇA MARCHE DOC ?
48
flex-basis (valeur de la taille initiale)
CSS
.flex-item {
flex-basis: auto | <width...
14/12/2015
COMMENT ÇA MARCHE DOC ?
49
flex
flex-grow flex-shrink flex-basis
Raccourci pour définir à la fois les propriété...
14/12/2015
COMMENT ÇA MARCHE DOC ?
50
align-self
auto | flex-start | flex-end | center | baseline | stretch
CSS
.flex-item...
14/12/2015
EXEMPLES CONCRETS !
14/12/2015
COMMENT ÇA MARCHE DOC ?
52
Modèle de page
14/12/2015
COMMENT ÇA MARCHE DOC ?
53
Menu extensible
14/12/2015
COMMENT ÇA MARCHE DOC ?
54
Système de grille
14/12/2015
COMMENT ÇA MARCHE DOC ?
55
Galerie d’images
14/12/2015
COMMENT ÇA MARCHE DOC ?
56
Mise en page d’articles
14/12/2015
ET LA COMPATIBILITÉ DANS TOUT ÇA ?
57
FirefoxIE10+
avec préfixe -ms
pour IE10
Opera Safari
avec préfixe -
webki...
14/12/2015
COMMENT ÇA MARCHE DOC ?
58
NICE !!!
14/12/2015
RESSOURCES
59
● Spécifications du W3C :
http://www.w3.org/TR/css-flexbox/
● Support navigateurs :
http://canius...
14/12/2015
DES QUESTIONS ?
60
En vous remerkiant !
Présenté par b@lix
info@shivacom.fr
www.shivacom.fr
Prochain SlideShare
Chargement dans…5
×

La vie en flex

5 609 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 609
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
3
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

×