Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FlexRox

Raphael Goetter
November 06, 2015

 FlexRox

La spécification CSS3 Flexbox rassemble un sacré paquet de bonnes pratiques et répond aux attentes des webdesigners et intégrateurs accumulées depuis de longues années.

Dès aujourd’hui (ou dans un avenir proche selon votre cible), elle constitue sans aucun doute la méthode de positionnement la plus pratique et polyvalente qui n’ait jamais existé en CSS.

Alors, jouable ou pas ? En prod ou ça dépend ? Sommes-nous prêts pour la révolution CSS qu'est Flexbox ?

Raphael Goetter

November 06, 2015
Tweet

More Decks by Raphael Goetter

Other Decks in Design

Transcript

  1. Crédit photo © Mathieu Drouet raphaël goetter ✓ alsacreations.com ✓

    goetter.fr ✓ mydevice.io ✓ knacss.com ✓ @goetter Flexbox ❤
  2. oui ! (IE 10) (Safari 3.1) (Android 2.1) (Chrome 4)

    (Firefox 2) (Opera 12.1) 97% (Stats Caniuse France)
  3. 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;
  4. .parent { display: flex; flex-direction: row; } axe principal =

    horizontal Salade Tomate Oignon Picon bière
  5. .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.
  6. .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.
  7. ‟Jesus, inventeur officiel de la grande distribution (de pains)… —

    Chang-Edouard Leclerc, distributeur </distribution>
  8. 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 !
  9. 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 ! .important { order: -1; } .done { order: 1; }
  10. ‟Quand c’est le bordel dans ma chambre, j’invoque les 


    Forces de l’Ordre ! — Luke Skybloguer, stagiaire Jedi </ordonnancement>
  11. .parent { display: flex; flex-direction: column; align-items: stretch; } .oignon

    { align-self: flex-end; } Salade Tomate Oignon Picon bière
  12. .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; }
  13. ‟Ça se saurait si on pouvait centrer verticalement avec margin:

    auto ! — Jean-Kévin Bayrou, centriste </alignement>
  14. header content
 lorem schnapsum hopla
 choucroute saucisse footer body {

    display: flex; flex-direction: column; } footer { margin-top: auto; }
  15. Picon bière .parent { display: flex; } .picon-biere { margin:

    auto; } Codepen or didn’t happen (margin-auto) PICON BIÈRE !
  16. 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 = auto) flex: 1 = flex: 1 1 0%
  17. ‟Non, un « gabarit élastique » n’est pas qu’un acteur

    de films pour adultes — Clarisse Morgane, contorsionniste </flexibilité>
  18. 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 = auto)
  19. header nav content footer body { min-height: 100vh; display: flex;

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

    flex-direction: column; } .wrapper { flex: 1; } display: flex;
  21. 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
  22. .wrapper { display: flex; display: block; } header nav content

    footer petit écran ? 1 valeur modifiée
  23. header nav content footer Flexbox t’aide à construire des mondes

    merveilleux ! JTM ♥ .wrapper { display: flex; flex-direction: column; } nav { order: 1; } petit écran ?
  24. <nav id="navigation"> <h1> <a href="" data-abbr="RG"> <span>Raphaël Goetter</span> </a> </h1>

    <a href="">à propos</a> <a href="">blog</a> <a href="">labo</a> <a href="">contact</a> </nav> HTML :
  25. @media (max-width: 480px) {
 nav a { display: block; padding:

    .4em 1em; text-decoration: none; color: #fff; } } CSS (petits écrans) :
  26. @media (min-width: 1025px) { nav { display: flex; justify-content: center;

    align-items: center; } } CSS (écrans larges) :
  27. @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) :
  28. @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) :
  29. ‟Bien sûr que flexbox vous aide à protéger vos données

    personnelles sur Facebook ! — Marcello Zuckerberg, Community Manager
  30. 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
  31. twitter.com nytimes.com flickr.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
  32. merci et @goetter Icônes browsers « Pony »: Safari /

    Opera by McSadat Chrome by he4rtofcourage IE by McSadat Firefox by NoReasonToHope raphaël BISOU ♥