Utiliser Flexbox

Flexbox est une technique simple et puissante, mais elle pose encore quelques problèmes de compatibilité. Sean Fioritto répond ici à la question : quand pourrai-je utiliser Flexbox dans le monde réel?

Par

J'ai pas mal écrit sur flexbox et la question qu'on me pose le plus souvent est “quand pourrai-je utiliser flexbox pour de bon ?” J'ai toujours pensé que Flexbox était pratique pour réaliser rapidement des prototypes, mais aussi qu'avec une bonne planification nous pourrions aisément l'utiliser dans le monde réel.

Dans cet article, nous allons voir dans quelles conditions flexbox peut être utilisé en production, en commençant par le meilleur scénario et en allant jusqu'à IE8.

Notre démo sera une page sur laquelle un ami travaille actuellement. Peter a rencontré quelques problèmes avec le système de grilles de Bootstrap, facilement résolus avec flexbox, l'exemple est donc intéressant pour notre démonstration. Voici la mise en page que nous allons créer :

Le résultat final

Le code des exemples est disponible sur github.

Nous allons envisager quatre scénarios :

  • Compatibilité avec les navigateurs dernier cri
  • Vous avez très peu de trafic IE
  • Vous devez assurer la compatibilité avec IE8, mais le design peut être différent
  • Vous devez assurer la compatibilité avec IE8 et le design doit être identique.

Scénario 1 : navigateurs dernier cri

Nous commençons avec le cas de figure le plus simple. Vous pouvez accéder ici à la démo et au code.

Dans les statistiques de fréquentation de mon blog, IE est quasiment absent, limité à 1% en provenance de IE10/11. Ce blog est fait pour les développeurs comme vous, donc je n'ai besoin de supporter que les derniers navigateurs que vous utilisez.

Si vous êtes dans le même cas, vous pouvez utiliser la syntaxe la plus récente de flexbox dès aujourd'hui, avec les précautions suivantes :

  • N'utilisez pas flex-wrap car il n'est pas compatible avec Firefox jusqu'à la version 28.
  • Ajoutez les préfixes -webkit
  • N'utilisez pas flexbox pour votre mise en page générale.

Si vous suivez ces règles, tout devrait bien se passer.

Passons maintenant au code de notre exemple.

La boîte du haut, avec les trois forfaits, est un container flex, et Peter souhaite que les boutons soient alignés en bas. Si le container externe est un flex container, avec des align-items stretch (l'option par défaut), alors toutes nos boîtes auront la même hauteur et il est aisé de mettre les boutons en bas avec une marge automatique.

Commençons par faire de cette section un flex container.

.plans {
  display: -webkit-flex;
  display: flex; }

Avec ça, nos trois div sont alignées sur une rangée et elles s'étirent verticalement sur tout l'espace disponible.

Transformons maintenant les forfaits en container flex. Nous changeons la direction pour column et les align-items pour flex-start, sinon les boutons s'étireraient pour remplir l'espace horizontal.

.plans > div {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  align-items: flex-start; }

Tout ce qu'il nous reste à faire, c'est de placer les boutons en bas de chaque section en sélectionnant tous les boutons et en fixant la marge supérieure à auto.

.plans > div a {
  margin-top: auto; }

J'ai utilisé flexbox à d'autres endroits de la page mais je suppose que vous connaissez déjà flexbox et n'entrerai pas plus dans les détails. Si vous ne connaissez pas bien flexbox, vous pouvez trouver une bonne intro ici (en français) ou (en anglais).

Scénario 2 : peu de trafic IE

Accédez à la démo et au code.

Même si vous n'avez que peu de fréquentation en provenance de navigateurs anciens, Il reste souhaitable d'assurer une compatibilité avec IE10 et Firefox 25 (ou précédents).

En combinant les syntaxes anciennes et nouvelles de flexbox, vous arriverez à mettre tout le monde d'accord. Pour plus de détails sur la compatibilité, voir caniuse.

Pour vous épargner l'ennui mortel d'avoir à écrire toutes les syntaxes et le préfixage, utilisez Autoprefixer. Si vous ne connaissez pas encore Grunt, Gulp, make-files etc. vous pouvez vous reporter à cet article (en français) ou celui-ci (en anglais).

Nous n'utiliserons pas les marges automatiques dans cette approche car elles ne fonctionnent pas dans toutes les versions. Assurez-vous de tester à fond IE10 qui comporte quelques bugs. Par exemple, dans le code de cette démo j'ai dû fixer la largeur à 100% pour le paragraphe au-dessus des boutons pour éviter que le texte ne sorte du container.

Pour vous donner une idée du code généré par autoprefixer, voici ce que ça donne pour la section des forfaits :

.plans {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
  .plans > div {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 33%;
    -ms-flex: 1 1 33%;
    flex: 1 1 33%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start; }
    .plans > div .stretch {
        width: 100%;
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 auto;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto; }

Avec Autoprefixer, tout ce code est généré automatiquement, vous n'avez qu'à écrire la dernière syntaxe. En bonus, vous avez le même service pour tout votre CSS !

Scénario 3 : support progressif IE8

Accédez à la démo et au code.

Les clients, ou les patrons, veulent en général que leur site soit identique sur tous les navigateurs, quelques-uns cependant comprennent la notion d'amélioration progressive.

Dans notre cas, l'amélioration progressive ne signifie pas que nous donnerons aux utilisateurs d'IE8 une simple colonne de contenus. Vous pouvez utiliser la mise en page classique en combinaison avec flexbox. Flexbox sera prioritaire lorsque compatible et les navigateurs incompatibles ignoreront purement et simplement flexbox pour utiliser la mise en page simplifiée.

Zoe Gillenwater a fait une belle présentation à ce sujet il y a quelques mois, voici un lien vers les slides.

Nous avons là une solution à toute épreuve, cependant elle implique une certaine duplication de code et en outre, savoir exactement ce qui sera “suffisamment bon” pour le boss ou le client n'est pas toujours facile.

Pour conserver sa simplicité à notre exemple, nous renoncerons à l'alignement parfait des boutons dans IE8 et IE9. Mais nous avons toujours besoin d'aligner horizontalement la section des forfaits, et pour cela nous pouvons utiliser floats.

.plans > div {
  width: 33%;
  float: left;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start; }

(rappel : je ne montre ici que la dernière syntaxe de flexbox, mais ce code est autopréfixé dans la démo live).

La flex-direction est column, et chacun des éléments de la section des forfaits est un élément block. Ils s'empilent donc dans la colonne et nous n'avons rien de particulier à faire.

La boîte des sign-up (section suivante) est un flex container, nous allons fixer sa largeur et sa propriété display :

.well form .inputs #email {
  width: 50%;
  display: inline;
  flex: 1 0 auto; }
.well form .inputs .btn {
  width: 250px;
  width: 25rem;
  margin-left: 16px;
  margin-left: 1rem; }

Le footer est aussi une flexbox, je l'ai fait fonctionner avec quelques floats. Vous voyez comment ça marche. Voici à quoi cela ressemble dans IE8 :

Le résultat dans IE8, on voit que les boutons ne sont pas alignés, mais c'est acceptable

Scénario 4 : Tout doit être pareil

Accédez à la démo et au code.

Si vous êtes dans cette catégorie, vous n'utiliserez peut-être pas du tout flexbox. Les options sont en effet limitées.

Il existe un polyfill flexbox appelé flexie.js. Il ne marche qu'avec une des anciennes syntaxes et pas du tout avec la nouvelle. L'idée d'utiliser d'abord Autoprefixer puis flexie.js pour IE9 et précédents ne fonctionne pas non plus. Flexie.js utilise le CSS non préfixé, or Autoprefixer ne génère pas d'ancienne syntaxe non préfixée car elle n'est utilisée par aucun navigateur.

Flexie comporte par ailleurs quelques bugs. En attendant qu'ils soient réparés, s'ils le sont jamais, la seule solution est de créer une feuille de style spécifique IE8/9 avec l'ancienne syntaxe flexbox non préfixée.

Même ainsi, ne vous attendez pas à ce que tout fonctionne. Vous ne pourrez pas utiliser auto margin. Vous devez concevoir une mise en page la plus simple possible. J'ai constaté que l'ancienne syntaxe ne me permettait pas de faire exactement la même chose que la nouvelle, même avec l'aide d'un polyfill.

Mais si vous utilisez les media queries, avec un peu d'amour, vous pouvez amener flexbox à marcher jusqu'à IE8.

Dans le code exemple, vous trouverez une version patchée de flexie.js que jai utilisée. Je l'ai faite rapidement, ne l'utilisez pas en production. Si vous êtes amenés à utiliser flexie en production, vous ferez plaisir à tout le monde en concevant un patch digne de ce nom et en l'envoyant à l'auteur de flexie.

Polyfill pour la syntaxe moderne

Ce qu'il nous faut c'est un polyfill pour la syntaxe moderne. Bonne nouvelle, le concepteur de flexie.js, Richard Herrera, y travaille. Mais pour l'instant c'est loin d'être terminé.

Apprendre la nouvelle syntaxe

La nouvelle syntaxe de flexbox n'est stable que depuis peu, ce qui fait que peu de gens la connaissent. Si vous pensez l'utiliser sur un de vos projets, j'ai ce qu'il vous faut. Cet article est le dernier élément de mon cours sur flexbox, disponible en pdf.


Ressources complémentaires en français

Using Flexbox today, par Chris Wright Ressources complémentaires en français

Flexbox, guide complet, par Chris Coyier


original paru le dans Planning for aliens.

Sur l'auteur : a appris le développement web sur le tas, il est aujourd'hui entrepreneur indépendant après s'être formé en sciences de l'informatique et avoir travaillé pour quelques grandes compagnies.
Il a récemment écrit un livre sur le développement web intitulé Sketching with CSS, il écrit pour Smashing magazine et a publié quelques projets open source. Il blogue sur planning for aliens et vous pouvez le suivre sur Twitter
.

Traduit avec l'aimable permission de Planning for Aliens et de l'auteur.
Copyright Planning for Aliens © 2014.