Upload
microsoft
View
328
Download
2
Tags:
Embed Size (px)
Citation preview
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