Flexbox Révolution
-
Upload
microsoft -
Category
Technology
-
view
328 -
download
2
Transcript of Flexbox Révolution
-
by raphal
-
Crdit photo Mathieu Drouet
raphal goetter alsacreations.com goetter.fr mydevice.io knacss.com @goetter
-
flexbox ?
-
distributionordonnancement
alignementflexibilit
-
compatible ?
-
oui !
(IE 10) (Safari 3.1)(Android 2.1)(Chrome 4)
(Firefox 2) (Opera 12.1)
(Stats Caniu
se France)
-
standard ?
-
presque !
-
erf !
-
OK, je fais quoi avec ?
-
Picon bire
mais aussi
-
nav content
-
nav content
-
nav content
mais aussi
-
je suis un pied toujours en bas
-
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 fluide et responsive
et ralis en quelques minutes
-
moi je suis un gabarit
je prends toute la hauteur de page
je suis fluide et responsive
et ralis en quelques minutes
mais aussi
-
avec des hauteurs identiques
je suis une grille en flexbox
certains de mes lments peuvent occuper plusieurs emplacements
et une gouttire dfinie
et je suis fluide et responsive
hop, moi je suis cal droite !
plutt chouette, non ?
mais aussi
-
kiwi.pdf
tomate.docx
oignon.pptx
salade.pdf
picon.docx
bire.pptx
kiwi.pdf
tomate.docx
oignon.pptx
salade.pdf
picon.docx
bire.pptx
mais aussi plein dautres trucs !
-
en action !
-
.parent {
display: block;
}
-
Salade
Tomate
Oignon
Picon bire
.enfant {
display: block;
}
-
Salade Tomate Oignon Picon bire
.parent {
display: flex;
}
flex-items
flex-containerdisplay: block;
display: inline-block;
display: table;
float: left;
display: none;
position: absolute;
-
distribution
-
distributionflex-direction
-
Salade Tomate Oignon Picon bire
.parent {
display: flex;
}
-
Salade Tomate Oignon Picon bire
.parent {
display: flex;
flex-direction: row;
}
axe principal =
horizontal
-
SaladeTomateOignonPicon bire
.parent {
display: flex;
flex-direction: row-reverse;
}
-
exemple vite fait ?
-
.parent {
display: flex;
flex-direction: row;
}
Le module de positionnement CSS3 Flexbox introduit un tout nouveau systme de positionnement (via la proprit display comme de coutume) permettant, entre autres, de : distribuer les lments aussi bien en lignes quen blocs contrler la gestion des espaces disponibles ; contrler les alignements verticaux et horizontaux ; agencer les lments sans tenir compte du DOM. Rien que ce dernier point dmontre quel point ce module est avanc par rapport tout ce quon a connu.
-
.parent {
display: flex;
flex-direction: row-reverse;
}
Le module de positionnement CSS3 Flexbox introduit un tout nouveau systme de positionnement (via la proprit display comme de coutume) permettant, entre autres, de : distribuer les lments aussi bien en lignes quen blocs ; contrler la gestion des espaces disponibles ; contrler les alignements verticaux et horizontaux ; agencer les lments sans tenir compte du DOM. Rien que ce dernier point dmontre quel point ce module est avanc par rapport tout ce quon a connu.
-
Salade
Tomate
Oignon
Picon bire
.parent {
display: flex;
flex-direction: column;
}
axe principal =
vertical
-
Salade
Tomate
Oignon
Picon bire
.parent {
display: flex;
flex-direction: column-reverse;
}
-
Salade Tomate Oignon Picon bire
.parent {
display: flex;
}
erf, a dborde
-
Salade Tomate Oignon
Picon bire
.parent {
display: flex;
flex-wrap: wrap;
}
-
Salade Tomate Oignon
Picon bire
.parent {
display: flex;
flex-wrap: wrap-reverse;
}
-
Jesus, inventeur officiel de la grande distribution (de pains) Chang-Edouard Leclerc, distributeur
-
ordonnancement
-
ordonnancementorder
-
Salade
Tomate
Oignon
Picon bire
.parent {
display: flex;
flex-direction: column;
}
-
Salade
Tomate
Oignon
Picon bire
.oignon {
order: 1;
}
-
Salade
Tomate
Oignon
Picon bire
.oignon {
order: 1;
}
.picon-biere {
order: -1;
}
-
exemple vite fait ?
-
Commencer bosserimportant
Changer de sous-vtementsimportantAcheter liPhone 6doneSuivre le lapin blanctodoPrendre un dernier picon-biretodo
Arrter de jouer HearthStonetodo
Ma todo liste !
-
Commencer bosserimportantChanger de sous-vtementsimportant
Acheter liPhone 6done
Suivre le lapin blanctodoPrendre un dernier picon-biretodo
Arrter de jouer HearthStonetodo
Ma todo liste !
.important {
order: -1;
}
.done {
order: 1;
}
-
Quand cest le bordel dans ma chambre, jinvoque les Forces de lOrdre ! Luke Skybloguer, stagiaire Jedi
-
alignement(axe principal)
-
alignement(axe principal)
justify-content
-
Salade
Tomate
Oignon
Picon bire
.parent {
display: flex;
flex-direction: column;
}
-
Salade
Tomate
Oignon
Picon bire
.parent {
display: flex;
flex-direction: column;
}
justify-content: flex-end;
-
Salade
Tomate
Oignon
Picon bire
.parent {
display: flex;
flex-direction: column;
}
justify-content: center;
-
Salade
Tomate
Oignon
Picon bire
.parent {
display: flex;
flex-direction: column;
}
justify-content: space-between;
-
alignement(axe secondaire)
-
alignement(axe secondaire)
align-items
-
Salade
Tomate
Oignon
Picon bire
.parent {
display: flex;
flex-direction: column;
}
-
.parent {
display: flex;
flex-direction: column;
}
align-items: flex-start;
Salade
Tomate
Oignon
Picon bire
-
Salade
Tomate
Oignon
Picon bire
align-items: flex-end;
.parent {
display: flex;
flex-direction: column;
}
-
Salade
Tomate
Oignon
Picon bire
align-items: center;
.parent {
display: flex;
flex-direction: column;
}
-
Salade
Tomate
Oignon
Picon bire
align-items: stretch;
.parent {
display: flex;
flex-direction: column;
}
-
.parent {
display: flex;
flex-direction: column;
align-items: stretch;
}
.oignon {
align-self: flex-end;
}
Salade
Tomate
Oignon
Picon bire
-
a se saurait si on pouvait centrer verticalement avec margin: auto ! Jean-Kvin Bayrou, centriste
-
mais en fait
-
flexbox est bi !
-
Picon bire
.parent {
display: flex;
}
.picon-biere {
margin: auto;
}
Codepen or didnt happen (margin-auto)
PICON BIRE !
-
flexibilit
-
flexibilitflex
-
flex
flex-grow
capacit slargir selon lespace
restant
(dfaut = 0)
flex-shrink
capacit se contracter selon lespace restant
(dfaut = 1)
flex-basis
dimension par dfaut avant que lespace ne soit distribu
(dfaut = main-size =
auto)
-
Salade
Tomate
Oignon
Picon bire
.parent {
display: flex;
flex-direction: column;
}
-
Salade
Tomate
Oignon
Picon bire
.oignon {
flex: 1;
}
-
Salade
Tomate
Oignon
Picon bire
.oignon {
flex: 1;
}
.tomate {
flex: 1;
}
50%
50%
-
Salade
Tomate
Oignon
Picon bire
.oignon {
flex: 1;
}
.tomate {
flex: 2;
}
2/3
1/3
-
exemple vite fait ?
-
accueil socit contact picon
nav a {
flex: 1;
}
nav a:hover {
flex: 2;
}
-
accueil socit contact picon
nav a {
flex: 1;
}
nav a:hover {
flex: 2;
}
-
Non, un gabarit lastique nest pas quun acteur de films pour adultes Clarisse Morgane, contorsionniste
-
rsum
-
distributionordonnancement
alignementflexibilit
-
distribution
ordonnancementalignementflexibilit
flex-direction (dfaut = row)
-
distributionordonnancement
alignementflexibilit
order (dfaut = 0)
-
distributionordonnancement
alignement
flexibilit
justify-content (dfaut = flex-start)
align-items (dfaut = stretch)
align-self (dfaut = auto)
-
distributionordonnancement
alignementflexibilit
flex (dfaut = variable selon grow/shrink/basis)
flex-grow (dfaut = 0)
flex-shrink (dfaut = 1)
flex-basis (dfaut = main-size = auto)
-
un template en 5min
-
ouais
-
header
nav
content
footer
body
.wrapper
-
header
nav
content
footer
body {
min-height: 100vh;
}
IE9+#lesavieztu?
-
header
nav
content
footer
body {
display: flex;
flex-direction: column;
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
footerFlexbox taide
construire des mondes merveilleux !
JTM
.wrapper {
display: flex;
flex-direction: column;
}
nav {
order: 1;
}
petit cran ?
-
Jobs done
Codepen or didnt happen (template)
-
Bien sr que flexbox vous aide protger vos donnes personnelles sur Facebook ! Marcello Zuckerberg, Community Manager
-
bonus
-
BFC !
-
un float ne dborde pas dun flex-container
un float ne dborde pas dun flex-item
un flex-container ne scoule pas autour dun float
-
Salade
.parent {
display: block;
}
.salade {
display: block;
}
-
Salade
.parent {
display: block;
}
.salade {
display: block;
float: left;
}
-
Salade
.parent {
display: flex;
}
.salade {
display: block;
float: left;
}
un float ne dborde pas dun flex-container
-
nav {
display: block;
}
.content {
display: block;
}
nav
content
-
contentnav nav { float: left;
}
.content {
display: block;
}
-
un flex-container ne scoule pas autour dun float
nav nav { float: left;
}
.content {
display: flex;
}
content
Codepen or didnt happen (BFC)
-
flexbox, une rvolution ?
-
ouais
-
flexbox, le futur du positionnement ?
-
a dpend
-
flexbox, en prod ?
-
ouais
(avec des prcautions : Autoprefixer )
-
ressources
-
http://philipwalton.github.io/solved-by-flexbox/ http://flexboxgrid.com/ http://the-echoplex.net/flexyboxes/ http://jackintheflexbox.tumblr.com/
-
Flexbox
all the things !
-
merci
et
@goetter
Icnes browsers Pony:Safari / Opera by McSadat Chrome by he4rtofcourage IE by McSadat Firefox by NoReasonToHope
raphal
BISOU