Slide 1
Slide 1 text
FALLAIT PAS
Flexbox
Nationale-Nederlanden, Prague, République Tchèque
L’INVITER
Slide 2
Slide 2 text
hello, je suis alsacien
raphaël goetter
Slide 3
Slide 3 text
Source : Nick Marchenko (Twitter)
FLEXBOX
DANS TES RÊVES :
FLEXBOX
DANS TON NAVIGATEUR:
Slide 4
Slide 4 text
FLEXBOX
compatibilité actuelle
Slide 5
Slide 5 text
Source : https://www.chromestatus.com/metrics/css/timeline/popularity/233
FLEXBOX
usage actuel
51%
Slide 6
Slide 6 text
ALORS C’EST QUOI
LE PROBLÈME ?
Slide 7
Slide 7 text
FLEXBOX N’EST PAS INTUITIF
FLEXBOX EST COMPLIQUÉ
FLEXBOX EST BIZARRE
Slide 8
Slide 8 text
FLEXBOX N’EST PAS
INTUITIF
et je vais te le prouver
1
Slide 9
Slide 9 text
JUSTIFY-
vs
ALIGN-
Slide 10
Slide 10 text
JUSTIFY-
vs
ALIGN-
.parent {
display: flex;
}
Slide 11
Slide 11 text
JUSTIFY-
vs
ALIGN-
.parent {
display: flex;
justify-content: flex-end;
}
axe principal
Slide 12
Slide 12 text
JUSTIFY-
vs
ALIGN-
.parent {
display: flex;
justify-content: flex-end;
flex-direction: column;
}
axe principal
Slide 13
Slide 13 text
JUSTIFY-
vs
ALIGN-
.parent {
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
}
axe principal
Slide 14
Slide 14 text
JUSTIFY-
vs
ALIGN-
Le préfixe (justify ou align)
dépend de l’axe principal
dans le parent.
‟
Slide 15
Slide 15 text
-CONTENT
vs
-ITEMS
Slide 16
Slide 16 text
JUSTIFY-CONTENT
aligne les enfants sur l’axe principal
ALIGN-CONTENT-ITEMS
aligne les enfants sur l’axe secondaire
ALIGN-CONTENT
aligne plusieurs rangées d’enfants sur l’axe secondaire (flex-wrap)
JUSTIFY-ITEMS
… n’existe pas !
Slide 17
Slide 17 text
-CONTENT
vs
-ITEMS
Le suffixe (content ou items)
dépend aussi de l’axe
principal dans le parent.
‟
Slide 18
Slide 18 text
-SELF
vs
-PAS-SELF
Slide 19
Slide 19 text
-SELF
vs
-PAS-SELF
.parent {
display: flex;
}
.kiwi {
align-self: flex-start;
}
Slide 20
Slide 20 text
-SELF
vs
-PAS-SELF
.parent {
display: flex;
}
.kiwi {
align-self: center;
}
Slide 21
Slide 21 text
-SELF
vs
-PAS-SELF
.parent {
display: flex;
}
.kiwi {
align-self: center;
justify-self: center; ?
}
Slide 22
Slide 22 text
ALIGN-SELF
vs
JUSTIFY-SELF
L’un des deux n’existe pas
dans les spécifications
Flexbox
‟
Slide 23
Slide 23 text
QUIZ !
Slide 24
Slide 24 text
.parent {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
}
.kiwi {
justify-items: flex-start;
justify-self: center;
align-items: flex-end;
}
MAIS OÙ SE PLACE KIWI?
Slide 25
Slide 25 text
1
.parent {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
}
.kiwi {
justify-items: flex-start;
justify-self: center;
align-items: flex-end;
}
MAIS OÙ SE PLACE KIWI?
2
3 4
4 6
Slide 26
Slide 26 text
.parent {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
}
.kiwi {
justify-items: flex-start;
justify-self: center;
align-items: flex-end;
}
MAIS OÙ SE PLACE KIWI?
2
3 4
4 6
axe principal
Slide 27
Slide 27 text
FLEXBOX N’EST PAS
INTUITIF
tu vois ce que je veux dire maintenant ?
1
Slide 28
Slide 28 text
FLEXBOX EST
COMPLIQUÉ
ça a l’air simple mais en fait…
2
Slide 29
Slide 29 text
PRIORITÉS DANS FLEXBOX
Je suis flex-wrap, dois-je laisser passer flex-shrink ?
Slide 30
Slide 30 text
width flex-basis
.flex-item {
flex-basis: 500px;
width: 250px;
}
Slide 31
Slide 31 text
FIGHT !
width flex-basis
Slide 32
Slide 32 text
width
flex-basis
FLEX-BASIS WINS !
Slide 33
Slide 33 text
flex-basis: auto;
width: valeur;
flex-basis: valeur;
flex-grow | flex-shrink
flex-wrap
max-width
min-width
PRIORITÉS DANS FLEXBOX
Slide 34
Slide 34 text
CONCRÈTEMENT ?
Slide 35
Slide 35 text
Salade Tomate Oignon Picon bière
.flex-container {
display: flex;
}
Slide 36
Slide 36 text
Salade Tomate Oignon Picon bière
.flex-container {
display: flex;
}
.flex-item {
width: 50%;
}
flex-basis: auto;
width: valeur;
flex-basis: valeur;
flex-grow | flex-shrink
flex-wrap
max-width
min-width
Slide 37
Slide 37 text
.flex-container {
display: flex;
}
.flex-item {
width: 3000px;
}
Salade Tomate Oignon Picon bière
flex-basis: auto;
width: valeur;
flex-basis: valeur;
flex-grow | flex-shrink
flex-wrap
max-width
min-width
Slide 38
Slide 38 text
flex-basis: auto;
width: valeur;
flex-basis: valeur;
flex-grow | flex-shrink
flex-wrap
max-width
min-width
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 3000px;
}
Salade
Tomate
Oignon
Picon bière
Slide 39
Slide 39 text
SUPER
« une question de taille… »
QUIZ !
Slide 40
Slide 40 text
.flex-item {
flex: 1;
width: 250px;
}
1000px
TAILLE 1
Slide 41
Slide 41 text
.flex-item {
flex: 1;
width: 250px;
}
1000PX
flex-grow le force à remplir l’espace restant
1000px
TAILLE 1
Slide 42
Slide 42 text
.flex-item {
flex-basis: 500px;
width: 250px;
}
1000px
TAILLE 2
Slide 43
Slide 43 text
.flex-item {
flex-basis: 500px;
width: 250px;
}
500PX
flex-basis l’emporte sur width
1000px
TAILLE 2
Slide 44
Slide 44 text
.flex-item {
flex-basis: auto;
width: 250px;
}
1000px
TAILLE 3
Slide 45
Slide 45 text
.flex-item {
flex-basis: auto;
width: 250px;
}
250PX
width l’emporte sur flex-basis: auto
1000px
TAILLE 3
Slide 46
Slide 46 text
.flex-item {
flex-basis: 500px;
width: 250px;
min-width: 750px;
}
1000px
TAILLE 4
Slide 47
Slide 47 text
750PX
.flex-item {
flex-basis: 500px;
width: 250px;
min-width: 750px;
}
min-width l’emporte sur width et flex-basis
1000px
TAILLE 4
Slide 48
Slide 48 text
.flex-item {
flex-basis: 500px;
flex-shrink: 1;
min-width: 1250px;
}
1000px
TAILLE 5
Slide 49
Slide 49 text
1250PX
.flex-item {
flex-basis: 500px;
flex-shrink: 1;
min-width: 1250px;
}
min-width l’emporte systématiquement
1000px
TAILLE 5
Slide 50
Slide 50 text
1000px
TAILLE 6
.flex-item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 1250px;
width: 500px;
min-width: 750px;
}
Slide 51
Slide 51 text
1000PX
flex-basis et min-width et flex-shrink s’appliquent
.flex-item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 1250px;
width: 500px;
min-width: 750px;
}
1000px
TAILLE 6
Slide 52
Slide 52 text
EN DÉTAIL :
FLEX-GROW,
FLEX-SHRINK,
LE CALCUL SAVANT
Slide 53
Slide 53 text
FLEX-GROW
facteur d’agrandissement si espace restant dans le flex-container
Salade Tomate Oignon
.salade {
flex-grow: 0;
}
.tomate {
flex-grow: 0;
}
.oignon {
flex-grow: 0;
}
Slide 54
Slide 54 text
FLEX-GROW
facteur d’agrandissement si espace restant dans le flex-container
Salade Tomate Oignon
.salade {
flex-grow: 0;
}
.tomate {
flex-grow: 1;
}
.oignon {
flex-grow: 0;
}
Slide 55
Slide 55 text
facteur d’agrandissement si espace restant dans le flex-container
Salade Tomate Oignon
.salade {
flex-grow: 1;
}
.tomate {
flex-grow: 2;
}
.oignon {
flex-grow: 0;
}
FLEX-GROW
Slide 56
Slide 56 text
facteur de rétrécissement si espace négatif dans le flex-container
Salade Tomate Oignon
* {flex-basis: 500px;}
.salade {
flex-shrink: 0;
}
.tomate {
flex-shrink: 0;
}
.oignon {
flex-shrink: 0;
}
FLEX-SHRINK
Slide 57
Slide 57 text
facteur de rétrécissement si espace négatif dans le flex-container
* {flex-basis: 500px;}
.salade {
flex-shrink: 0;
}
.tomate {
flex-shrink: 1;
}
.oignon {
flex-shrink: 0;
}
Salade Tomate Oignon
FLEX-SHRINK
Slide 58
Slide 58 text
facteur de rétrécissement si espace négatif dans le flex-container
* {flex-basis: 500px;}
.salade {
/* rien */
}
.tomate {
flex-shrink: 1;
}
.oignon {
flex-shrink: 0;
}
Salade Tomate Oignon
FLEX-SHRINK
Slide 59
Slide 59 text
CALCUL DE FLEX-GROW-SHRINK
accroche-toi bien !
Salade Tomate Oignon
1 On calcule l’Espace Restant
Déterminé par la somme des flex-basis (ou des width, ou des min|max-width)
2 Résultat positif ou négatif ?
Cas 1 : si l’espace est positif, alors flex-grow s’applique
Cas 2 : si l’espace est négatif, alors flex-shrink s’applique
3 Comptez-vous !
Cas 1 : on compte le nombre de flex-grow présents et leur valeur totale
Cas 2 : on compte le nombre de flex-shrink présents et leur valeur totale
Slide 60
Slide 60 text
4
on applique simplement la formule (ici pour flex-grow) :
Slide 61
Slide 61 text
O RLY ?
Slide 62
Slide 62 text
CONCRÈTEMENT ?
sérieux, t’as pas compris ?!
Slide 63
Slide 63 text
Salade Tomate
1 On calcule l’Espace Restant
flex: 1 est égal à flex: 1 1 0, donc la somme des flex-basis vaut 0 et l’Espace
Restant est de 1000px
2 Somme des flex-grow
flex-grow identique —> répartition équitable —> +500px chacun (qu’ils ajoutent à
leur flex-basis)
3 Calcul
la taille finale de chaque élément est donc flex-basis+500px , soit 500 px.
flex: 1; flex: 1;
1000px
Slide 64
Slide 64 text
Salade Tomate
1 On calcule l’Espace Restant
La somme des flex-basis vaut 700px et l’Espace Restant est de 300px
2 Somme des flex-grow
répartition :
2/3 de 300px pour le premier, 1/3 de 300px pour le 2è
3 Calcul
la taille finale de chaque élément : 500px et 500px
flex: 2 0 300px; flex: 1 0 400px;
1000px
Slide 65
Slide 65 text
FLEXBOX EST
COMPLIQUÉ
tu vois, je te l’avais dit
2
Slide 66
Slide 66 text
FLEXBOX EST
BIZARRE
certains comportements sont très inattendus
3
Slide 67
Slide 67 text
RATIO D’IMAGE
CASSÉ
TAILLE MINIMALE
GÊNANTE
LARGEURS
FAUSSÉES
http://www.hadoukenshoryuken.com
Slide 68
Slide 68 text
RATIO D’IMAGE CASSÉ
Slide 69
Slide 69 text
div {
display: block;
}
img {
max-width: 100%;
height: auto;
}
Slide 70
Slide 70 text
j’ai réduit ma fenêtre
div {
display: block;
}
img {
max-width: 100%;
height: auto;
}
Slide 71
Slide 71 text
div {
display: flex;
}
img {
max-width: 100%;
height: auto;
}
Slide 72
Slide 72 text
div {
display: flex;
}
img {
max-width: 100%;
height: auto;
}
j’ai réduit ma fenêtre
Slide 73
Slide 73 text
div {
display: flex;
}
img {
max-width: 100%;
height: auto;
align-self: flex-start;
}
Slide 74
Slide 74 text
TAILLE MINIMALE
http://www.hadoukenshoryuken.com
Slide 75
Slide 75 text
div {
display: block;
}
Slide 76
Slide 76 text
div {
display: block;
}
p {
word-wrap: break-word;
}
Slide 77
Slide 77 text
Slide 78
Slide 78 text
div {
display: block;
}
p {
word-wrap: break-word;
}
j’ai réduit ma fenêtre
http://www.hadouken
shoryuken.com
Slide 79
Slide 79 text
Slide 80
Slide 80 text
http://www.hadoukenshoryuken.com
div {
display: flex;
}
p {
word-wrap: break-word;
}
j’ai réduit ma fenêtre
Slide 81
Slide 81 text
To provide a more
reasonable default
minimum size for flex
items, this specification
introduces a new auto value
as the initial value of the
min-width and min-height
‟
— les spécifications W3C
Slide 82
Slide 82 text
• Tous les éléments du monde
ont une valeur de min-width
égale à 0
• Sauf les flex items dont la
valeur est auto
• Ils ne peuvent donc pas se
réduire s’ils ont du contenu
« insécable »
‟
— libre traduction
Slide 83
Slide 83 text
http://www.hadoukenshoryuken.com
div {
display: flex;
}
p {
word-wrap: break-word;
}
j’ai réduit ma fenêtre
Slide 84
Slide 84 text
http://www.hadouken
shoryuken.com
div {
display: flex;
}
p {
word-wrap: break-word;
min-width: 0;
}
Slide 85
Slide 85 text
QUI ?
http://www.alsacreations.com/
• éléments « remplacés » :
• ![]()
•
•
• éléments de formulaire :
•
•
• et aussi :
• ,
• mot longs (URL)
les flex-items
Slide 86
Slide 86 text
* {
min-width: 0;
}
?
Slide 87
Slide 87 text
LARGEURS FAUSSÉES
lorem elsass ipsum bière
choucroute picon kouglof
carola wurscht knacks
grumbere hopla gal !
lorem elsass ipsum bière
choucroute picon kouglof
carola wurscht picon kouglof
carola wurscht picon kouglof
lorem elsass
ipsum bière
choucroute
picon kouglof
carola wurscht
Slide 88
Slide 88 text
.flex-container {
display: flex;
}
.premier {
/* rien de spécial */
}
.deuxieme {
/* rien de spécial */
}
.flex-container
.deuxieme
.premier
lorem elsass ipsum bière
choucroute picon kouglof
carola wurscht knacks
grumbere hopla gal !
lorem elsass ipsum bière
choucroute picon kouglof
carola wurscht picon kouglof
carola wurscht picon kouglof
lorem elsass
ipsum bière
choucroute
picon kouglof
carola wurscht
choucroute
picon kouglof
carola wurscht
Slide 89
Slide 89 text
lorem elsass ipsum bière
choucroute picon kouglof carola
wurscht knacks grumbere hopla
gal !
lorem elsass ipsum bière
choucroute picon kouglof carola
wurscht picon kouglof carola
wurscht picon kouglof
lorem
elsass
ipsum
bière
choucroute
picon
kouglof
carola
wurscht
choucroute
picon
kouglof
carola
wurscht
.flex-container {
display: flex;
}
.premier {
/* rien de spécial */
}
.deuxieme {
width: 50%;
}
Slide 90
Slide 90 text
lorem elsass ipsum bière
choucroute picon kouglof carola
wurscht knacks grumbere hopla
gal !
lorem elsass ipsum bière
choucroute picon kouglof carola
wurscht picon kouglof carola
wurscht picon kouglof
lorem
elsass
ipsum
bière
choucroute
picon
kouglof
carola
wurscht
choucroute
picon
kouglof
carola
wurscht
.flex-container {
display: flex;
}
.premier {
/* rien de spécial */
}
.deuxieme {
width: 50%;
}
flex: 0 1 auto;
Slide 91
Slide 91 text
lorem elsass ipsum bière
choucroute picon kouglof carola
wurscht knacks grumbere hopla
gal !
lorem elsass ipsum bière
choucroute picon kouglof carola
wurscht picon kouglof carola
wurscht picon kouglof
lorem
elsass
ipsum
bière
choucroute
picon
kouglof
carola
wurscht
choucroute
picon
kouglof
carola
wurscht
.flex-container {
display: flex;
}
.premier {
/* rien de spécial */
}
.deuxieme {
width: 50%;
}
flex: 0 1 auto; flex: 0 1 auto 50%;
Slide 92
Slide 92 text
.flex-container {
display: flex;
}
.premier {
width: 50%;
}
.deuxieme {
width: 50%;
}
flex: 0 1 auto 50%; flex: 0 1 auto 50%;
lorem elsass ipsum
bière choucroute
picon kouglof carola
wurscht knacks
grumbere hopla gal !
lorem elsass ipsum
bière choucroute
picon kouglof carola
wurscht picon kouglof
carola wurscht picon
kouglof
lorem elsass ipsum
bière choucroute
picon kouglof carola
wurscht choucroute
picon kouglof carola
wurscht
Slide 93
Slide 93 text
.flex-container {
display: flex;
}
.premier {
flex: 1;
}
.deuxieme {
flex: 1;
}
flex: 1 1 auto 0; flex: 1 1 auto 0;
lorem elsass ipsum
bière choucroute
picon kouglof carola
wurscht knacks
grumbere hopla gal !
lorem elsass ipsum
bière choucroute
picon kouglof carola
wurscht picon kouglof
carola wurscht picon
kouglof
lorem elsass ipsum
bière choucroute
picon kouglof carola
wurscht choucroute
picon kouglof carola
wurscht
Slide 94
Slide 94 text
FLEXBOX EST
BIZARRE
certains « bugs » n’en sont pas !
3
Slide 95
Slide 95 text
nan mais en
vrai, Flexbox
c’est quand
même
vachement
bien !
Slide 96
Slide 96 text
FLEXBOX SAIT ALIGNER
FLEXBOX EST RAPIDE
FLEXBOX EST FLUIDE
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
maintenant I know Flexbox
OK
… jusqu’à demain
Slide 100
Slide 100 text
MERCI !
@goetter alsacreations.fr
Raphaël Goetter
présentation disponible sur :
https://speakerdeck.com/goetter