Hello mon cher, ma chère, mes chers ! Aujourd’hui, et pour cette deuxième édition de « Booste ton workflow », j’ai l’immense honneur de changer ta vie te présenter Flexbox : La petite beauté qui va résoudre tous tes ennuis de positionnement

Je t’explique : On va commencer par une petite introduction sur les manières de faire d’avant, et on passera ensuite sur la nouveauté du jour : Flexbox. Le but de cet article n’est pas de produire un tutoriel aussi long que la première édition de #BTW, mais bien de t’introduire au sujet et de te fournir les ressources nécessaires pour apprendre à t’en servir. Ton body est ready ? PARFAIT.

float, clear both, width 48.333335457%, margin-left 1.33347% …

Ce titre, aussi indigeste soit-il, représente un peu la galère que c’est de positionner des éléments en CSS à l’heure actuelle. Tu sais, tu colles des float partout, tu mets des width et des margin en espérant que ça passe, et si ça passe pas.. Ben tant pis, tu dis tchou à la maquette et tu fais à l’arrache. On est d’accord, ça craint un peu. Et surtout, ça prend un temps fou. Ça te demande surtout de modifier la structure de ton HTML pour éviter des bizarreries. Ben oui, quand tu dois rajouter un clear: both, le plus souvent, tu le mets sur une classe, et dans ton HTML tu rajoutes une petite div discrète avec ta classe juste après tes éléments flottants … C’est long. C’est frustrant. Et ben devine quoi ?

ahem_wrong_spongebob

 

Le chevalier sur son cheval blanc : Flexbox

Derrière ce titre mielleux se cache une révolution, j’ai nommé Flexbox (oui ça fait 3 fois que je le dis, ET ALORS?), et je vais ENFIN t’expliquer en quoi ça consiste. Tout d’abord, Flexbox est la contraction de « Flexible Box »  et c’est un module du W3C Last Call Working Draft relativement récent. Ca veut dire que c’est encore une sorte de work in progress (travaux en cours quoi), et que c’est encore sujet à nombreux changements. Ça fait un moment que ce module est dans cette forme, donc on peut dire qu’il ne changera plus tant que ça. L’idée de Flexbox, c’est d’enfin admettre que le CSS est un langage vieillot et qu’il a besoin de changer pour s’adapter au web d’aujourd’hui. Nan mais sérieusement, t’as vu les maquettes que nos amis les webdesigner pondent ? Le webdesign évolue et ainsi, les langages devraient suivre ! Flexbox propose une ribambelle (oui je viens bien d’utiliser ce mot) de propriétés dont le but est de couvrir tous les cas de figures classiques (header, sidebar, contenu, footer) mais aussi beaucoup moins classiques comme seul ton webdesigner préféré peut les imaginer. Pour te montrer comment utiliser les propriétés de Flexbox, je ne pense pas pouvoir faire mieux que CSS Tricks, qui a parfaitement illustré l’emploi de ces propriétés. D’ailleurs, en parlant de ressources …

Quelques ressources pour apprendre Flexbox

Solved by Flexbox

Solved by Flexbox est un site qui te montre quelques cas concrets qui, auparavant, étaient (trop) compliqués à réaliser avec des floats et des width, mais compliqué dans le sens « Y’A TROP DE TRUCS A FAIRE POUR UN TRUC TELLEMENT SIMPLE ! », mais ce dernier montre la différence avec Flexbox : Littéralement, quelques lignes. C’est beau, et ça te permet de prendre conscience à quel point Flexbox c’est génial, plus clean, et plus logique.

Flexbox in 5 minutes

Ce site est en fait une petite application web qui a pour but de te permettre de comprendre concrètement comment ça marche Flexbox ! En fait, ça se présente un peu comme un tutoriel et tu peux changer les différentes propriétés d’un container et de ses éléments et voir en direct ce que ça donne, expérimenter, tester, bref c’est un peu ton labo Flexbox personnel ! C’est notamment grâce à ce site que j’ai commencé à comprendre le fonctionnement de Flexbox !

L’excellent article d’Alsacreations sur Flexbox

Alsacréations, leur réputation n’est plus à faire (… ou du moins dans ma région, l’Alsace !). Souvent quand tu cherches certaines propriétés CSS, tu tombes sur leurs articles sur Google, et ça qu’importe ta région ! Leurs articles fortement pédagogiques sont parfaits pour découvrir un nouveau sujet ! Flexbox n’est pas une exception pour eux, et ils ont très bien compris l’importance de ce nouveau module. Sans plus attendre, voici le lien, et bonne lecture

CanIUse Flexbox ?

Tu connais peut être déjà ce site : Can I Use, qui te dit quels navigateurs supportent une propriété, de manière partielle (préfixage), entière (sans préfixage) ou pas du tout. Ils font évidemment de même pour le module Flexbox, et si je mets ce lien ici, c’est juste pour que tu puisses montrer aux gens qui te diront « mais attends c’est trop naze Flexbox c’est même pas bien supporté ». En fait si, Flexbox c’est très bien supporté. Mis à part pour IE inférieur à 10, et ça ça dépendra du projet sur lequel tu travailles. Mais très honnêtement, je te conseille d’aller voir ce site, qui parle très bien des raisons qui devraient te pousser à dire adieu à IE8. Pour IE9, il faut savoir que c’est un point bien moins limitant que IE8 ou 10, puisqu’en fait IE8 c’est la dernière version d’IE supportée par Windows XP. Windows 7 (et au-delà) vont jusqu’au maximum existant aujourd’hui, et de manière générale, les gens ne sont pas sur IE9 ou IE10 mais soit sur IE8 (Windows XP) soit IE11, mais entre, bof. Après tout, Flexbox est un choix personnel. J’ai fais le choix de la modernité et de faire avancer le web, plutôt que de se laisser freiner par des technologies anciennes.

Jack in the Flexbox

Ce Tumblr, au nom assez funky (Jack in the box pour ceux qui ne connaissent pas), a pour but de te montrer que Flexbox, c’est un couteau-suisse qui te permet de résoudre tous les cas de figure auxquels tu peux vouloir penser. Et du coup, ce tumblr te présente des cas concrets. Je pense vraiment que ces cas concrets t’aideront bien mieux à comprendre la puissance de Flexbox que de la théorie. Alors va rendre une petite visite à ce Tumblr !

Bref … Tu l’auras compris …

Flexbox c’est la vie. Ça te fait gagner un temps fou, ça résout tous tes problèmes, ça fait ton café, ça sort ton chien, ça va au boulot à ta place et en bonus ça pécho pour toi en boîte. Comme je l’ai dit dans la partie sur « Can I use », Flexbox c’est avant tout un choix personnel. Si tu ne te sens pas prêt à passer aux navigateurs modernes, tu peux rester sur les floats et tout ça. Ca dépend évidemment aussi du besoin du projet, si ça s’adresse à des entreprises (qui souvent sont restés bloqués sur Windows XP), je peux comprendre que Flexbox n’est pas à l’ordre du jour.

J’espère que cette petite introduction t’as plu, et si tu as des retours d’expériences vis-à-vis de Flexbox, n’hésite pas une seule seconde à partager ça avec nous, les success story on adore ! Et sinon, je te rappelle que tu as la possibilité de me dire si un sujet particulier t’intéresse pour les prochaines éditions de #BTW dans les commentaires ! Tous les commentaires seront pris en compte dans la décision du prochain article ! Allez, on décolle, à la prochaine !

Booste ton workflow #2 : Flexbox
5 (100%) 5 votes

Ce qui pourrait également t'intéresser ...

9 réflexions sur “ Booste ton workflow #2 : Flexbox ”

    1. Depuis que je l’ai fait je regarde plus en arrière. J’en apprend encore tous les jours sur Flexbox mais ça change tout ! Et puis l’intégration avec compass est juste parfaite. Les ressources que j’ai linké dans l’article te montreront à quel point c’est intuitif et ça se prend très vite en main ! Fonce

    1. Bonjour Pierre, et merci beaucoup pour ces ressources !

      Ça me fait chaud au coeur de voir que Flexbox est enfin au programme MMI. Je n’ai malheureusement pas eu cette chance en SRC ! Merci pour l’évolution de la profession !

      1. On en reste au stade de l’introduction…
        la majeure partie de mon cours de S3 est plutôt sur les bonnes pratiques, et de gros rappels sur le positionnement, le flux, le modèle de boite, et les sélecteurs, qui sont souvent très très mal compris.
        En tout cas, félicitation pour ce blog très pertinent, je vais passer l’adresse aux promos de Tarbes et Castres.

        Avez-vous une affiche que je pourrais mettre dans les couloirs ??
        (pour me contacter : https://www.facebook.com/pierre.vert.733 )

        Bonne continuation.

    1. Bonjour Pierre
      Oui justement Vincent m’a envoyé le lien la dernière fois du coup on l’a programmé pour lundi sur les réseaux sociaux, merci du partage du coup

      Et pour répondre à ton commentaire plus haut, pour les affiches c’est pas encore dans notre (tout petit) budget, mais ça viendra, déjà le temps de les faire

      Merci beaucoup en tout cas pour ta contribution !

      1. bonjour David,
        pas de souci pour les affiches, faites au mieux quand vous aurez le temps.
        Pour limiter le côté budget, vous pouvez m’envoyer un pdf, je m’occuperai des impressions. (logo + titre + lien peuvent faire l’affaire à défaut d’une affiche complète finalisée)
        bonne continuation

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir