la vie en flex

14/12/2015

VOYEZLA VIE EN FLEX !

Présenté par b@lixpour 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 !

UN PEU D’HISTOIRE...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 ?

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

displayflex | inline-flex

CSS

.flex-container { display: flex;}

14/12/2015


17

1 2 3 4

flex-directionrow | row-reverse | column | column-reverse

CSS

.flex-container { flex-direction: row;}

14/12/2015


18


4 3 2 1

CSS

.flex-container { flex-direction: row-reverse;}

14/12/2015


19

1

2

3

4


CSS

.flex-container { flex-direction: column;}

14/12/2015


20

4

3

2

1


CSS

.flex-container { flex-direction: column-reverse;}

14/12/2015


21

flex-wrapnowrap | 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-wrapnowrap | 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-flowflex-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-contentflex-start | flex-end | center | space-between | space-around

1 2 3 4

CSS

.flex-container { justify-content: flex-start;}

14/12/2015


27


1 2 3 4

CSS

.flex-container { justify-content: flex-end;}

14/12/2015


28


1 2 3 4

CSS

.flex-container { justify-content: center;}

14/12/2015


29


1 2 3 4

CSS

.flex-container { justify-content: space-between;}

14/12/2015


30


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-itemsflex-start | flex-end | center | baseline | stretch

1 2 3 4

CSS

.flex-container { align-items: flex-start;}

14/12/2015


33


1 2 3 4

CSS

.flex-container { align-items: flex-end;}

14/12/2015


34


1 2 3 4

CSS

.flex-container { align-items: center;}

14/12/2015


35


content content content content

CSS

.flex-container { align-items: baseline;}

14/12/2015


36


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-contentflex-start | flex-end | center | space-between | space-around | stretch

CSS

.flex-container { align-content: flex-start;}

14/12/2015


39


CSS

.flex-container { align-content: flex-end;}

14/12/2015


40


CSS

.flex-container { align-content: center;}

14/12/2015


41


CSS

.flex-container { align-content: space-between;}

14/12/2015


42


CSS

.flex-container { align-content: space-around;}

14/12/2015


43


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

flexflex-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-selfauto | 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 Safariavec 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/

http://www.w3.org/TR/css-flexbox/

http://caniuse.com/#feat=flexbox

https://developer.mozilla.org/fr/docs/Web/Guide/CSS/Flexible_boxes

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://la-cascade.ghost.io/flexbox-guide-complet/

http://the-echoplex.net/flexyboxes/

http://jackintheflexbox.tumblr.com/

14/12/2015

DES QUESTIONS ?

60

En vous remerkiant !

Présenté par b@[email protected]

mailto:[email protected]

http://www.shivacom.fr/

la vie en flex

Internet