Slide 1

Slide 1 text

FLEXROx by raphaël

Slide 2

Slide 2 text

Crédit photo © Mathieu Drouet raphaël goetter ✓ alsacreations.com ✓ goetter.fr ✓ mydevice.io ✓ knacss.com ✓ @goetter Flexbox ❤

Slide 3

Slide 3 text

ﬂexbox ?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

distribution ordonnancement alignement ﬂexibilité

Slide 6

Slide 6 text

compatible ?

Slide 7

Slide 7 text

oui ! (IE 10) (Safari 3.1) (Android 2.1) (Chrome 4) (Firefox 2) (Opera 12.1) 97% (Stats Caniuse France)

Slide 8

Slide 8 text

en action !

Slide 9

Slide 9 text

.parent { display: block; }

Slide 10

Slide 10 text

Salade Tomate Oignon Picon bière .enfant { display: block; }

Slide 11

Slide 11 text

Salade Tomate Oignon Picon bière .parent { display: flex; } « ﬂex-items » « ﬂex-container » display: block; display: inline-block; display: table; float: left; display: none; position: absolute;

Slide 12

Slide 12 text

distribution

Slide 13

Slide 13 text

distribution flex-direction

Slide 14

Slide 14 text

Salade Tomate Oignon Picon bière .parent { display: flex; }

Slide 15

Slide 15 text

.parent { display: flex; flex-direction: row; } axe principal = horizontal Salade Tomate Oignon Picon bière

Slide 16

Slide 16 text

.parent { display: flex; flex-direction: row-reverse; } Salade Tomate Oignon Picon bière

Slide 17

Slide 17 text

un exemple vite fait ?

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; } axe principal = vertical

Slide 21

Slide 21 text

Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column-reverse; }

Slide 22

Slide 22 text

Salade Tomate Oignon Picon bière .parent { display: flex; } erf, ça déborde

Slide 23

Slide 23 text

Salade Tomate Oignon Picon bière .parent { display: flex; flex-wrap: wrap; }

Slide 24

Slide 24 text

Salade Tomate Oignon Picon bière .parent { display: flex; flex-wrap: wrap-reverse; }

Slide 25

Slide 25 text

‟Jesus, inventeur ofﬁciel de la grande distribution (de pains)… — Chang-Edouard Leclerc, distributeur

Slide 26

Slide 26 text

ordonnancement

Slide 27

Slide 27 text

ordonnancement order

Slide 28

Slide 28 text

Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; }

Slide 29

Slide 29 text

Salade Tomate Oignon Picon bière .oignon { order: 1; }

Slide 30

Slide 30 text

Salade Tomate Oignon Picon bière .oignon { order: 1; } .picon-biere { order: -1; }

Slide 31

Slide 31 text

exemple vite fait ?

Slide 32

Slide 32 text

Commencer à bosser important Changer de sous-vêtements important Acheter l’iPhone 6 done Suivre le lapin blanc todo Prendre un dernier picon-bière todo Arrêter de jouer à HearthStone todo Ma todo liste !

Slide 33

Slide 33 text

Slide 34

Slide 34 text

‟Quand c’est le bordel dans ma chambre, j’invoque les   Forces de l’Ordre ! — Luke Skybloguer, stagiaire Jedi

Slide 35

Slide 35 text

alignement  (axe principal)

Slide 36

Slide 36 text

alignement  (axe principal) justify-content

Slide 37

Slide 37 text

Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; }

Slide 38

Slide 38 text

Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; } justify-content: flex-end;

Slide 39

Slide 39 text

Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; } justify-content: center;

Slide 40

Slide 40 text

Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; } justify-content: space-  between;

Slide 41

Slide 41 text

Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; } justify-content: space-  around;

Slide 42

Slide 42 text

alignement  (axe secondaire)

Slide 43

Slide 43 text

alignement  (axe secondaire) align-items

Slide 44

Slide 44 text

Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; }

Slide 45

Slide 45 text

.parent { display: flex; flex-direction: column; } align-items: flex-start; Salade Tomate Oignon Picon bière

Slide 46

Slide 46 text

Salade Tomate Oignon Picon bière align-items: flex-end; .parent { display: flex; flex-direction: column; }

Slide 47

Slide 47 text

Salade Tomate Oignon Picon bière align-items: center; .parent { display: flex; flex-direction: column; }

Slide 48

Slide 48 text

Salade Tomate Oignon Picon bière align-items: stretch; .parent { display: flex; flex-direction: column; }

Slide 49

Slide 49 text

.parent { display: flex; flex-direction: column; align-items: stretch; } .oignon { align-self: flex-end; } Salade Tomate Oignon Picon bière

Slide 50

Slide 50 text

.parent { display: flex; flex-direction: column; align-items: stretch; } .oignon { align-self: flex-end; } Salade Tomate Oignon Picon bière .salade,  .picon { align-self: center; }

Slide 51

Slide 51 text

‟Ça se saurait si on pouvait centrer verticalement avec margin: auto ! — Jean-Kévin Bayrou, centriste

Slide 52

Slide 52 text

t’en as pas marge !?

Slide 53

Slide 53 text

Salade Tomate Oignon Picon bière .parent { display: flex; }

Slide 54

Slide 54 text

Salade Tomate Oignon Picon bière .parent { display: flex; } .picon-bière { margin-left: auto; }

Slide 55

Slide 55 text

Salade Tomate Oignon Picon bière .parent { display: flex; } .oignon{ margin-left: auto; }

Slide 56

Slide 56 text

header content  lorem schnapsum hopla  choucroute saucisse footer body { display: flex; flex-direction: column; }

Slide 57

Slide 57 text

header content  lorem schnapsum hopla  choucroute saucisse footer body { display: flex; flex-direction: column; } footer { margin-top: auto; }

Slide 58

Slide 58 text

mais en fait…

Slide 59

Slide 59 text

ﬂexbox est bi !

Slide 60

Slide 60 text

Picon bière .parent { display: flex; } .picon-biere { margin: auto; } Codepen or didn’t happen (margin-auto) PICON BIÈRE !

Slide 61

Slide 61 text

ﬂexibilité

Slide 62

Slide 62 text

ﬂexibilité flex-grow, flex-shrink, flex-basis

Slide 63

Slide 63 text

Picon bière .parent { display: flex; } .picon-biere { width: 200px; } ﬂex-grow

Slide 64

Slide 64 text

Picon bière .parent { display: flex; } .picon-biere { width: 200px; flex-grow: 1; } ﬂex-grow

Slide 65

Slide 65 text

Picon bière .parent { display: flex; } .picon-biere { width: 200px; } ﬂex-shrink

Slide 66

Slide 66 text

Picon bière .parent { display: flex; } .picon-biere { width: 200px; flex-shrink: 1; } ﬂex-shrink

Slide 67

Slide 67 text

Picon bière .parent { display: flex; } .picon-biere { flex-basis: 200px; } ﬂex-basis

Slide 68

Slide 68 text

Picon bière .parent { display: flex; } .picon-biere { flex-basis: 200px; flex-grow: 1; } ﬂex-basis

Slide 69

Slide 69 text

ﬂex 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 = auto) flex: 1 = flex: 1 1 0%

Slide 70

Slide 70 text

Salade Tomate Oignon Picon bière .parent { display: flex; flex-direction: column; }

Slide 71

Slide 71 text

Salade Tomate Oignon Picon bière .oignon { flex: 1; }

Slide 72

Slide 72 text

Salade Tomate Oignon Picon bière .oignon { flex: 1; } .tomate { flex: 1; } 50% 50%

Slide 73

Slide 73 text

Salade Tomate Oignon Picon bière .oignon { flex: 1; } .tomate { flex: 2; } 2/3 1/3

Slide 74

Slide 74 text

exemple vite fait ?

Slide 75

Slide 75 text

accueil société contact picon nav a { flex: 1; } nav a:hover { flex: 2; }

Slide 76

Slide 76 text

accueil société contact picon nav a { flex: 1; } nav a:hover { flex: 2; }

Slide 77

Slide 77 text

Flexbox t’aide à construire des mondes merveilleux ! ON EN A GROW !

Slide 78

Slide 78 text

‟Non, un « gabarit élastique » n’est pas qu’un acteur de ﬁlms pour adultes — Clarisse Morgane, contorsionniste

Slide 79

Slide 79 text

résumé

Slide 80

Slide 80 text

distribution ordonnancement alignement ﬂexibilité

Slide 81

Slide 81 text

distribution ordonnancement alignement ﬂexibilité flex-direction (défaut = row)

Slide 82

Slide 82 text

distribution ordonnancement alignement ﬂexibilité order (défaut = 0)

Slide 83

Slide 83 text

distribution ordonnancement alignement ﬂexibilité justify-content (défaut = flex-start) align-items (défaut = stretch) align-self (défaut = auto)

Slide 84

Slide 84 text

distribution ordonnancement alignement ﬂexibilité flex (défaut = variable selon grow/shrink/basis) flex-grow (défaut = 0) flex-shrink (défaut = 1) flex-basis (défaut = auto)

Slide 85

Slide 85 text

un template en 5min ?

Slide 86

Slide 86 text

ouais ! header nav content footer

Slide 87

Slide 87 text

header nav content footer body .wrapper

Slide 88

Slide 88 text

header nav content footer body { min-height: 100vh; } IE9+  #lesavieztu?

Slide 89

Slide 89 text

header nav content footer body { display: flex; flex-direction: column; } min-height: 100vh;

Slide 90

Slide 90 text

header nav content footer body { min-height: 100vh; display: flex; flex-direction: column; } .wrapper { flex: 1; }

Slide 91

Slide 91 text

header nav content footer body { min-height: 100vh; display: flex; flex-direction: column; } .wrapper { flex: 1; } display: flex;

Slide 92

Slide 92 text

header nav content footer body { min-height: 100vh; display: flex; flex-direction: column; } .wrapper { display: flex; flex: 1; } .content { flex: 1; } 6 lignes de CSS

Slide 93

Slide 93 text

.wrapper { display: flex; display: block; } header nav content footer petit écran ? 1 valeur modiﬁée

Slide 94

Slide 94 text

header nav content footer Flexbox t’aide à construire des mondes merveilleux ! JTM ♥ .wrapper { display: flex; flex-direction: column; } nav { order: 1; } petit écran ?

Slide 95

Slide 95 text

Job’s done Codepen or didn’t happen (template)

Slide 96

Slide 96 text

une navigation responsive ?

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

Raphaël Goetter

à propos blog labo contact HTML :

Slide 99

Slide 99 text

@media (max-width: 480px) {  nav a { display: block; padding: .4em 1em; text-decoration: none; color: #fff; } } CSS (petits écrans) :

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

@media (min-width: 1025px) { nav { display: flex; } } CSS (écrans larges) :

Slide 102

Slide 102 text

@media (min-width: 1025px) { nav { display: flex; justify-content: center; } } CSS (écrans larges) :

Slide 103

Slide 103 text

@media (min-width: 1025px) { nav { display: flex; justify-content: center; align-items: center; } } CSS (écrans larges) :

Slide 104

Slide 104 text

@media (min-width: 1025px) { nav { display: flex; justify-content: center; align-items: center; } nav a:nth-of-type(-n+2) { order: -1; } } CSS (écrans larges) :

Slide 105

Slide 105 text

@media (min-width: 481px) and (max-width: 1024px) { nav { flex-wrap: wrap; } nav h1 { width: 100%; order: -1; } nav > a { width: 50%; } } CSS (écrans moyens) :

Slide 106

Slide 106 text

Job’s done http://goetter.fr/

Slide 107

Slide 107 text

‟Bien sûr que ﬂexbox vous aide à protéger vos données personnelles sur Facebook ! — Marcello Zuckerberg, Community Manager

Slide 108

Slide 108 text

ﬂexbox,   une révolution ?

Slide 109

Slide 109 text

ouais

Slide 110

Slide 110 text

ﬂexbox, le futur du positionnement ?

Slide 111

Slide 111 text

ça dépend®©™

Slide 112

Slide 112 text

sidebar header title article 1 footer article 2 article 3 .container { display: grid; grid-template-areas: "header header header header" "nav title title title" "nav article article article" "footer footer footer footer"; } header { grid-area: header; } nav { grid-area: nav; } .title { grid-area: title; } article {} footer { grid-area: footer; } Grid Layout cdpn.io/xwaoOP

Slide 113

Slide 113 text

ﬂexbox,   en prod ?

Slide 114

Slide 114 text

ouais (avec des précautions : Autopreﬁxer — )

Slide 115

Slide 115 text

(la preuve)

Slide 116

Slide 116 text

twitter.com nytimes.com ﬂickr.com booking.com mappy.com ft.com walmart.com washingtonpost.com usatoday.com mailchimp.com weather.com foxsports.com liberation.fr paris.fr canalplay.com 6play.fr roquefort-societe.com

Slide 117

Slide 117 text

chouette, des démos !

Slide 118

Slide 118 text

ressources

Slide 119

Slide 119 text

http://philipwalton.github.io/solved-by-ﬂexbox/

Slide 120

Slide 120 text

http://jackintheﬂexbox.tumblr.com/

Slide 121

Slide 121 text

http://the-echoplex.net/ﬂexyboxes/

Slide 122

Slide 122 text

http://www.vincent-valentin.name/articles/le-petit-ﬂexbox-illustre

Slide 123

Slide 123 text

http://www.knacss.com grilles et layout basés sur ﬂexbox

Slide 124

Slide 124 text

https://github.com/philipwalton/ﬂexbugs (et surtout)

Slide 125

Slide 125 text

Flexbox all the things !

Slide 126

Slide 126 text

Avant Flexbox, je n’étais qu’un être surhumain normal… ‟ — Chuck Maurice, chapelier

Slide 127

Slide 127 text

formations.alsacreations.fr

Slide 128

Slide 128 text

merci et @goetter Icônes browsers « Pony »: Safari / Opera by McSadat Chrome by he4rtofcourage IE by McSadat Firefox by NoReasonToHope raphaël BISOU ♥