Flexbox, un coup de dés

Ce brillant article est le premier d’une série conçue par Landon Schropp pour expliquer Flexbox. Une méthode originale pour comprendre les fondamentaux de Flexbox et les mettre en pratique.

Par

NdT : Ce brillant article est le premier d’une série conçue par Landon Schropp pour expliquer simplement flexbox. Les articles suivants seront traduits au fur et à mesure de leur publication.

Qu’est-ce que vous diriez de réaliser des mises en page complexes en quelques minutes ? Flexbox est la nouvelle spécification de layout CSS qui vous aidera à créer des mises en page dynamiques. Avec flexbox, le centrage vertical, les colonnes de même hauteur, la réorganisation des items et des directions est un jeu d’enfant.

Il y a un mythe autour de flexbox, selon lequel celui-ci ne serait pas encore vraiment supporté. Totalement faux ! 93% des utilisateurs du web utilisent un navigateur supportant flexbox. C’est mieux que la compatibilité de l’élément HTML5 <video> !

NdT : pour avoir tous les détails à jour sur la compatibilité navigateurs, consultez Can I Use.

Dans cet article, je vais vous présenter les bases de flexbox en vous montrant comment créer les faces d’un dé. Pour l’instant, nous laisserons de côté les aspects complexes de flexbox tels que les préfixes constructeurs, les anciennes versions de flexbox et les questions liées aux navigateurs — ces points feront l’objet d’un article à venir.

La première face du dé

Un dé présente six faces, chacune portant un certain nombre de points. La première face contient un point.

Commençons avec le HTML.

//HTML
<div class="first-face">
  <span class="pip"></span>
</div>

Pour nous faciliter la vie, j’ai ajouté quelques styles basiques pour la représentation des faces et des points, voici ce que ça donne :

La première étape consiste à indiquer au navigateur que cette face est un conteneur flexbox.

//CSS
.first-face {
  display: flex;
}

Le résultat n’est pas visible, mais beaucoup de choses se passent sous le capot :

visualisation des axes principal et transversal, passant par le centre du dé

Le conteneur first-face dispose maintenant d’un axe principal (main axis) horizontal. L’axe principal d’un conteneur flexbox peut être horizontal ou vertical, mais par défaut il est horizontal. Si nous ajoutions un autre point sur la face du dé, celui-ci serait donc positionné à droite du premier. Le conteneur dispose également d’un axe transversal (cross axis) vertical. L’axe transversal est toujours perpendiculaire à l’axe principal.

La propriété justify-content définit l’alignement le long de l’axe principal. Nous voulons centrer le point le long de l’axe principal, nous utiliserons donc la valeur center de la propriété justify-content.

//CSS
.first-face {
  display: flex;
  justify-content: center;
}

Cool ! Comme l’axe principal est horizontal, le point est maintenant centré horizontalement dans l’élément parent.

La propriété align-items régit la façon dont les items sont positionnés le long de l’axe transversal. Comme nous voulons que le point soit centré le long de cet axe, nous utiliserons là aussi la valeur center.

//CSS
.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

Et voilà, c’est aussi simple que ça, notre point est centré !

Ajoutons un peu de complexité

Sur la deuxième face du dé, le premier point est en haut à gauche et le deuxième est en bas à droite. C’est aussi très facile à réaliser avec flexbox !

Là encore, nous commençons avec HTML :

//HTML
<div class="second-face">
  <span class="pip"></span>
  <span class="pip"></span>
</div>

et un CSS basique :

//CSS
.second-face {
  display: flex;
}

Nous avons maintenant deux points l’un à côté de l’autre. Nous voulons les disposer aux angles opposés du dé. La propriété justify-content a une valeur pour cela : space-between.

La valeur space-between répartit l’espace de manière égale entre les items flex. Comme il n’y en a que deux dans notre cas, cela revient à les écarter d’un côté et de l’autre.

//CSS
.second-face {
  display: flex;
  justify-content: space-between;
}

C’est ici que ça devient un peu plus épineux. Contrairement au cas précédent, nous ne pouvons pas utiliser align-items car cela affecterait les deux points. Ici, nous pouvons utiliser la propriété align-self de flexbox. Cette propriété nous permet d’aligner des items individuels à volonté sur l’axe transversal ! Dans notre cas, la valeur que nous donnerons à la propriété est flex-end.

//CSS
.second-face {
  display: flex;
  justify-content: space-between;
}

.second-face .pip:nth-of-type(2) {
  align-self: flex-end;
}

Pas mal !

Imbrication horizontale et verticale

Nous allons passer la troisième face et nous attaquer directement à la quatrième. Celle-ci est un peu plus complexe que les autres car nous devons intégrer deux colonnes, chacune contenant deux points.

Nous allons utiliser deux aspects de flexbox ici :

  • les conteneurs peuvent avoir un contenu vertical ou horizontal
  • les conteneurs peuvent être imbriqués.

Notre balisage va maintenant inclure deux colonnes :

//HTML
<div class="fourth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>

Nous voulons que nos deux colonnes soient positionnées sur les deux côtés opposés, nous pouvons donc utiliser justify-content: space-between comme précédemment :

//CSS
.fourth-face {
  display: flex;
  justify-content: space-between;
}

Ensuite, nous devons transformer nos colonnes en conteneurs flex. On pourrait croire qu’elles le sont déjà, mais rappelez-vous que nous n’avons pas encore indiqué display: flex à l’intérieur des colonnes, nous l’avons seulement indiqué sur le conteneur global.

//CSS
.fourth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column {
  display: flex;
  flex-direction: column;
}

Nous utilisons la propriété flex-direction pour régler la direction de l’axe principal sur “colonne” : flex-direction: column.

Pas de changement apparent, mais les colonnes sont maintenant toutes les deux des conteneurs flex. Vous avez remarqué que nous avons inséré un conteneur flex directement à l’intérieur d’un autre conteneur flex ? Pas de souci, flexbox accepte les imbrications !

La dernière étape consiste à espacer les points à l’intérieur des colonnes. Puisque l’axe principal est vertical (dans les colonnes) nous pouvons à nouveau utiliser justify-content.

//CSS
.fourth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Note : On aurait également pu construire cette face sans colonnes, en utilisant le “wrapping”, que je présenterai dans un article à venir.

Pour conclure

Waooh, trois faces réalisées ! Il en reste trois et vous disposez maintenant de suffisamment d’infos pour les créer vous-mêmes. Essayez de le faire et lorsque vous aurez terminé, jetez un coup d’oeil au CodePen ci-dessous pour vérifier les réponses.

See the Pen Flexbox Dice by Landon Schropp (@LandonSchropp) on CodePen.

Cet article est le premier d’une série de sept leçons sur Flexbox. Si vous l’avez apprécié, vous pouvez vous abonner au cours entier (en anglais) à Free Flexbox Starter Course. Le prochain article couvrira la façon d’écrire Flexbox sans les préfixes constructeurs ni l'ancienne syntaxe.

Dans la même série :

Flexbox, un coup de dés
Layout sur 12 colonnes avec Flexbox


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Liste des articles sur Flexbox dans La Cascade.

Ressources complémentaires en anglais

W3C, recommandation Flexbox
Flexbox, in Codrops CSS reference, long article détaillé de Sara Soueidan
Using Flexbox today, par Chris Wright
A designer's guide to Flexbox, de Philip Walton
Solved by Flexbox, de Philip Walton, une démonstration par l'exemple de tout les problèmes que Flexbox peut résoudre.
Flexbox cheatsheet, l'antisèche de flexbox, un excellent complément à cet article, beaucoup d'exemples pratiques de positionnement.
Flexbox Cheatsheet Cheatsheet, par Joni Trythall, une superbe antisèche à télécharger, super pratique !
Flexbox, The next generation of CSS layout has arrived, par Nick Pettit (Treehouse)

Outils pour expérimenter Flexbox en ligne :

Flexplorer
Flexbox adventures, par Chris Wright
CSS Flexbox Please!
Flexy Boxes
Un terrain de jeu pour comprendre Flexbox.

Ressources complémentaires en français

CSS3 Flexbox Layout module, par Raphael
Utiliser Flexbox, par Sean Fioritto (ici-même) : Sean répond ici à la question “quand pourrai-je utiliser Flexbox dans le monde réel ?”


original paru le dans DWB, le blog de David Walsh.

Sur l’auteur : est un développeur et entrepreneur basé à Seattle. Il est l’auteur de Free Flexbox Starter Course et de Unraveling Flexbox, un livre sur la création de layouts modernes et responsifs en CSS. Il adore réaliser des applications simples et faciles à utiliser. On peut le suivre sur Twitter.

Traduit avec l’aimable autorisation de DWB et de l’auteur.
Copyright DWB © 2015.