FlexRox

FLEXROx by raphaël

Crédit photo © Mathieu Drouet

raphaël goetter✓ alsacreations.com ✓ goetter.fr ✓ mydevice.io ✓ knacss.com ✓ @goetter

http://www.alsacreations.com

http://goetter.fr

http://www.mydevice.io

http://knacss.com

flexbox ?

distribution

ordonnancement

alignement

flexibilité

compatible ?

oui !

(IE 10) (Safari 3.1)(Android 2.1)(Chrome 4)

(Firefox 2) (Opera 12.1)

(Stats Caniuse France)

standard ?

presque !

erf !

OK, je fais quoi avec ?

Picon bière

mais aussi…

nav content

nav content

nav content

mais aussi…

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 réalisé en quelques minutes

moi je suis un gabarit

je prends toute la hauteur de page

je suis fluide 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 !

en action !

.parent {

display: block;

}

Salade

Tomate

Oignon

Picon bière

.enfant {

display: block;

}

Salade Tomate Oignon Picon bière

.parent {

display: flex;

}

« flex-items »

« flex-container »display: block;

display: inline-‐block;

display: table;

float: left;

display: none;

position: absolute;

distribution

distributionflex-‐direction


.parent {

display: flex;

}

.parent {

display: flex;

flex-‐direction: row;

}

axe principal =

horizontal


.parent {

display: flex;

flex-‐direction: row-‐reverse;

}

SaladeTomateOignonPicon bière

exemple vite fait ?

.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 officiel de la grande distribution (de pains)…

— Chang-Edouard Leclerc, distributeur

</distribution>

ordonnancement

ordonnancementorder

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;

}

exemple vite fait ?

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)

alignement(axe principal)

justify-‐content

Salade

Tomate

Oignon

Picon bière

.parent {

display: flex;


}

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

Salade

Tomate

Oignon

Picon bière

.parent {

display: flex;


}

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

t’en as pas marge !?


.parent {

display: flex;

}


.parent {

display: flex;

}

.picon-‐bière {

margin-‐left: auto;

}


.parent {

display: flex;

}

.oignon{

margin-‐left: auto;

}

header

contentlorem schnapsum hopla

choucroute saucisse

footer

body {

display: flex;


}

header

contentlorem schnapsum hopla

choucroute saucisse

footer

body {

display: flex;


}

footer {

margin-‐top: auto;

}

mais en fait…

flexbox est bi !

Picon bière

.parent {

display: flex;

}

.picon-‐biere {

margin: auto;

}

Codepen or didn’t happen (margin-auto)

PICON BIÈRE !

flexibilité

flexibilitéflex-‐grow, flex-‐shrink, flex-‐basis

Picon bière.parent {

display: flex;

}

.picon-‐biere {

width: 200px;

}

flex-grow


display: flex;

}

.picon-‐biere {

width: 200px;

flex-‐grow: 1;

}

flex-grow


display: flex;

}

.picon-‐biere {

width: 200px;

}

flex-shrink


display: flex;

}

.picon-‐biere {

width: 200px;

flex-‐shrink: 1;

}

flex-shrink


display: flex;

}

.picon-‐biere {

flex-‐basis: 200px;

}

flex-basis


display: flex;

}

.picon-‐biere {

flex-‐basis: 200px;

flex-‐grow: 1;

}

flex-basis

flex

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

.parent {

display: flex;


}

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

exemple vite fait ?

accueil société contact picon

nav a {

flex: 1;

}

nav a:hover {

flex: 2;

}

accueil société contact picon

nav a {

flex: 1;

}

nav a:hover {

flex: 2;

}

flexibilité à tous les étages

enfant 2lorem schnapsum hopla

choucroute saucisse

.parent {

display: flex;

}

.enfant-‐1,

.enfant-‐2 {

width: 50%;

}

enfant 1lorem schnapsum hopla

choucroute saucissepicon knack

enfant 2lorem schnapsum

hoplachoucroute saucisse

.parent {

display: flex;

}

.enfant-‐1,

.enfant-‐2 {

width: 50%;

}

enfant 1lorem schnapsum

hoplachoucroute saucisse

picon knack

.enfant-‐1 {

margin-‐right: 50px;

}

enfant 2lorem

schnapsum hopla

choucroute saucisse

.parent {

display: flex;

}

.enfant-‐1,

.enfant-‐2 {

width: 50%;

}

enfant 1lorem

schnapsum hopla

choucroute saucisse

picon knack

.enfant-‐1 {

margin-‐right: 250px;

}

(et ouais parce quepar défaut, flex-shrink vaut 1)

‟Non, un « gabarit élastique » n’est pas qu’un acteur de films pour adultes

— Clarisse Morgane, contorsionniste

</flexibilité>

résumé

distribution

ordonnancement

alignement

flexibilité

distribution

ordonnancement

alignement

flexibilité

flex-‐direction (défaut = row)

distribution

ordonnancement

alignement

flexibilité

order (défaut = 0)

distribution

ordonnancement

alignement

flexibilité

justify-‐content (défaut = flex-‐start)

align-‐items (défaut = stretch)

align-‐self (défaut = auto)

distribution

ordonnancement

alignement

flexibilité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)

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-‐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 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 flexbox vous aide à protéger vos données personnelles sur Facebook !

— Marcello Zuckerberg, Community Manager

flexbox, une révolution ?

ouais

flexbox, le futur du positionnement ?

ça dépend ®©™

flexbox, en prod ?

ouais

(avec des précautions : Autoprefixer ♥ )

(la preuve)

http://www.theguardian.com/

ressources

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

https://github.com/philipwalton/flexbugs

(et surtout)

Flexbox

all the things !

merci

et

@goetter

Icônes browsers « Pony »:Safari / Opera by McSadat Chrome by he4rtofcourage IE by McSadat Firefox by NoReasonToHope

raphaël

BISOU ♥

Design

FlexRox