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