La vie en flex

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
3
L’intégration il y a 20 ans :
<table></table>

14/12/2015
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 !

14/12/2015
5
L’intégration il y a 10 ans :
<div></div>
+
CSS

14/12/2015
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 !

14/12/2015
7
DÉSESPOIR !!!

14/12/2015
8
THIS IS A REVOLUTION !
Puis Flexbox est arrivé et comme dirait Steve...

14/12/2015
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

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 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.

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/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 (Flex container)
● Des éléments flex (Flex item)
● Des directions pour chaque axe (start/end)
Le principe

14/12/2015
16
Conteneur flex
élément flex
display
flex | inline-flex
CSS
.flex-container {
display: flex;
}

14/12/2015
17
1 2 3 4
flex-direction
row | row-reverse | column | column-reverse
CSS
.flex-container {
flex-direction: row;
}

14/12/2015
18
flex-direction
4 3 2 1
CSS
.flex-container {
flex-direction: row-reverse;
}

14/12/2015
19
1
2
3
4
flex-direction
CSS
.flex-container {
flex-direction: column;
}

14/12/2015
20
4
3
2
1
flex-direction
CSS
.flex-container {
flex-direction: column-reverse;
}

14/12/2015
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;
}

14/12/2015
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;
}

14/12/2015
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;
}

14/12/2015
24
Et le positionnement dans tout ça ?

14/12/2015
25
justify-content
Alignement sur l’axe principal
● flex-start
● flex-end
● center
● space-between
● space-around

14/12/2015
26
justify-content
flex-start | flex-end | center | space-between | space-around
1 2 3 4
CSS
.flex-container {
justify-content: flex-start;
}

14/12/2015
27
justify-content
1 2 3 4
CSS
.flex-container {
justify-content: flex-end;
}

14/12/2015
28
justify-content
1 2 3 4
CSS
.flex-container {
justify-content: center;
}

14/12/2015
29
justify-content
1 2 3 4
CSS
.flex-container {
justify-content: space-between;
}

14/12/2015
30
justify-content
1 2 3 4
CSS
.flex-container {
justify-content: space-around;
}

14/12/2015
31
align-items
Alignement sur l’axe secondaire
● flex-start
● flex-end
● center
● baseline
● stretch

14/12/2015
32
align-items
flex-start | flex-end | center | baseline | stretch
1 2 3 4
CSS
.flex-container {
align-items: flex-start;
}

14/12/2015
33
align-items
1 2 3 4
CSS
.flex-container {
align-items: flex-end;
}

14/12/2015
34
align-items
1 2 3 4
CSS
.flex-container {
align-items: center;
}

14/12/2015
35
align-items
content content content content
CSS
.flex-container {
align-items: baseline;
}

14/12/2015
36
align-items
1 2 3 4
CSS
.flex-container {
align-items: stretch;
}

14/12/2015
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

14/12/2015
38
align-content
flex-start | flex-end | center | space-between | space-around | stretch
CSS
.flex-container {
align-content: flex-start;
}

14/12/2015
39
align-content
CSS
.flex-container {
align-content: flex-end;
}

14/12/2015
40
align-content
CSS
.flex-container {
align-content: center;
}

14/12/2015
41
align-content
CSS
.flex-container {
align-content: space-between;
}

14/12/2015
42
align-content
CSS
.flex-container {
align-content: space-around;
}

14/12/2015
43
align-content
CSS
.flex-container {
align-content: stretch;
}

14/12/2015
44
Propriétés spécifiques aux items flex

14/12/2015
45
order
CSS
.flex-item {
order: <integer>;
}
3
order: -1
1
order: 0
4
order: 1
2
order: 2

14/12/2015
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

14/12/2015
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

14/12/2015
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

14/12/2015
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;
}

14/12/2015
50
align-self
auto | flex-start | flex-end | center | baseline | stretch
CSS
.flex-item {
align-self: flex-end;
}

14/12/2015
EXEMPLES CONCRETS !

14/12/2015
52
Modèle de page

14/12/2015
53
Menu extensible

14/12/2015
54
Système de grille

14/12/2015
55
Galerie d’images

14/12/2015
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 -
webkit
Chrome iOS Android

14/12/2015
58
NICE !!!

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/

14/12/2015
DES QUESTIONS ?
60
En vous remerkiant !
Présenté par b@lix
info@shivacom.fr
www.shivacom.fr

La vie en flex

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Empfohlen

Empfohlen (20)

La vie en flex