FlexRox

Crédit photo © Mathieu Drouet
raphaël goetter
✓ alsacreations.com
✓ goetter.fr
✓ mydevice.io
✓ knacss.com
✓ @goetter

distribution
ordonnancement
alignement
ﬂexibilité

oui !
(IE 10) (Safari 3.1)(Android 2.1)
(Chrome 4)
(Firefox 2) (Opera 12.1)
(Stats Caniuse France)

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 ﬂuide et
responsive
et réalisé en quelques minutes

moi je suis un gabarit
je prends
toute la
hauteur
de page
je suis ﬂuide et responsive
et réalisé en quelques minutes
mais aussi…

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…

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 !

.parent {
display: block;
}

Salade
Tomate
Oignon
Picon bière
.enfant {
display: block;
}

Salade Tomate Oignon Picon bière
.parent {
display: flex;
}
« ﬂex-items »
« ﬂex-container »
display: block;
display: inline-‐block;
display: table;
float: left;
display: none;
position: absolute;

distribution
flex-‐direction

.parent {
display: flex;
}

.parent {
display: flex;
flex-‐direction: row;
}
axe principal
=
horizontal

.parent {
display: flex;
flex-‐direction: row-‐reverse;
}
SaladeTomateOignonPicon bière

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

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

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;
}

.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 ofﬁciel de la
grande distribution (de pains)…
— Chang-Edouard Leclerc, distributeur
</distribution>

Salade
Tomate
Oignon
Picon bière
.parent {
display: flex;
}

Salade
Tomate
Oignon
Picon bière
.oignon {
order: 1;
}

Salade
Tomate
Oignon
Picon bière
.oignon {
order: 1;
}
.picon-‐biere {
order: -‐1;
}

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 !

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;
}

‟Quand c’est le bordel dans ma
chambre, j’invoque les  
Forces de l’Ordre !
— Luke Skybloguer, stagiaire Jedi
</ordonnancement>

alignement 
(axe principal)
justify-‐content

Salade
Tomate
Oignon
Picon bière
.parent {
display: flex;
}
justify-‐content: flex-‐end;

Salade
Tomate
Oignon
Picon bière
.parent {
display: flex;
}
justify-‐content: center;

Salade
Tomate
Oignon
Picon bière
.parent {
display: flex;
}
justify-‐content: space-‐ 
between;

alignement 
(axe secondaire)

alignement 
(axe secondaire)
align-‐items

.parent {
display: flex;
}
align-‐items: flex-‐start;
Salade
Tomate
Oignon
Picon bière

Salade
Tomate
Oignon
Picon bière
align-‐items: flex-‐end;
.parent {
display: flex;
}

Salade
Tomate
Oignon
Picon bière
align-‐items: center;
.parent {
display: flex;
}

Salade
Tomate
Oignon
Picon bière
align-‐items: stretch;
.parent {
display: flex;
}

.parent {
display: flex;
align-‐items: stretch;
}
.oignon {
align-‐self: flex-‐end;
}
Salade
Tomate
Oignon
Picon bière

‟Ça se saurait si on pouvait
centrer verticalement avec
margin: auto !
— Jean-Kévin Bayrou, centriste
</alignement>

.parent {
display: flex;
}
.picon-‐bière {
margin-‐left: auto;
}

.parent {
display: flex;
}
.oignon{
margin-‐left: auto;
}

header
content 
lorem schnapsum hopla 
choucroute saucisse
footer
body {
display: flex;
}

header
content 
choucroute saucisse
footer
body {
display: flex;
}
footer {
margin-‐top: auto;
}

Picon bière
.parent {
display: flex;
}
.picon-‐biere {
margin: auto;
}
Codepen or didn’t happen (margin-auto)
PICON BIÈRE !

ﬂexibilité
flex-‐grow, flex-‐shrink, flex-‐basis

Picon bière
.parent {
display: flex;
}
.picon-‐biere {
width: 200px;
}
ﬂex-grow

Picon bière
.parent {
display: flex;
}
.picon-‐biere {
width: 200px;
flex-‐grow: 1;
}
ﬂex-grow

Picon bière
.parent {
display: flex;
}
.picon-‐biere {
width: 200px;
}
ﬂex-shrink

Picon bière
.parent {
display: flex;
}
.picon-‐biere {
width: 200px;
flex-‐shrink: 1;
}
ﬂex-shrink

Picon bière
.parent {
display: flex;
}
.picon-‐biere {
flex-‐basis: 200px;
}
ﬂex-basis

Picon bière
.parent {
display: flex;
}
.picon-‐biere {
flex-‐basis: 200px;
flex-‐grow: 1;
}
ﬂex-basis

ﬂex
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)

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

accueil société contact picon
nav a {
flex: 1;
}
nav a:hover {
flex: 2;
}

ﬂexibilité à tous les
étages

enfant 2 
choucroute saucisse
.parent {
display: flex;
}
.enfant-‐1, 
.enfant-‐2 {
width: 50%;
}
enfant 1 
choucroute saucisse 
picon knack

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;
}

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, ﬂex-shrink vaut 1)

‟Non, un « gabarit élastique »
n’est pas qu’un acteur de ﬁlms
pour adultes
— Clarisse Morgane, contorsionniste
</flexibilité>

distribution
ordonnancement
alignement
ﬂexibilité
flex-‐direction (défaut = row)

distribution
ordonnancement
alignement
ﬂexibilité
order (défaut = 0)

distribution
ordonnancement
alignement
ﬂexibilité
justify-‐content (défaut = flex-‐start)
align-‐items (défaut = stretch)
align-‐self (défaut = auto)

distribution
ordonnancement
alignement
ﬂexibilité
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)

header
nav
content
footer
body
.wrapper

header
nav
content
footer
body {
min-‐height: 100vh;
}
IE9+ 
#lesavieztu?

header
nav
content
footer
body {
display: flex;
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 {
flex: 1;
}

.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;
}
nav {
order: 1;
}
petit
écran ?

Job’s done
Codepen or didn’t happen (template)

‟Bien sûr que ﬂexbox vous aide
à protéger vos données
personnelles sur Facebook !
— Marcello Zuckerberg, Community Manager

ﬂexbox,  
une révolution ?

ﬂexbox, le futur du
positionnement ?

ouais
(avec des précautions : Autopreﬁxer ♥ )

http://philipwalton.github.io/solved-by-flexbox/http://flexboxgrid.com/http://the-echoplex.net/flexyboxes/http://jackintheflexbox.tumblr.com/

https://github.com/philipwalton/ﬂexbugs
(et surtout)

merci
et
@goetter
Icônes browsers « Pony »:
Safari / Opera by McSadat
Chrome by he4rtofcourage
IE by McSadat
Firefox by NoReasonToHope
raphaël
BISOU ♥

FlexRox

Contenu connexe

En vedette

Plus de Normandie Web Xperts

FlexRox