Layout sur 12 colonnes avec Flexbox

La suite de la série de Landon Schropp sur Flexbox. Après avoir découvert les bases avec un simple dé, nous nous lançons dans les mises en page sur 12 colonnes.

Par

Dans une mise en page sur 12 colonnes, la page est divisée en douze colonnes invisibles. Celles-ci sont séparées les unes des autres par un petit espace, qu’on appelle gouttière (gutter). La page est divisée en rangées et les conteneurs situés dans ces rangées occupent chacun un certain nombre de colonnes.

image
Représentation schématique d'une mise en page sur 12 colonnes.

Les mises en page sur 12 colonnes sont partout. Jetez un coup d’oeil à ces landing pages de Heroku, ChowNow et Square. Est-ce que vous remarquez la division en sections occupant une moitié, un tiers, un quart de la largeur de la page ?

image
Rigueur, élégance, lisibilité de la mise en page.

Dans ce tutoriel, je vais vous montrer comment utiliser les propriétés flex-grow, flex-shrink et flex-basis pour construire les layouts sur 12 colonnes sans avoir besoin d’importer une bibliothèque !

Si vous aimez les mises en pages sur 12 colonnes, n’hésitez pas à vous reporter à mon livre Unraveling Flexbox. Vous y trouverez tout ce dont vous aurez besoin pour construire votre système de grilles grâce à Flexbox.

Pour commencer, un container

Allons-y. Admettons que vous vouliez que chacune des <div> du HTML suivant occupe un tiers de la <section>.

//HTML
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
</section>

Pour que ce soit un peu plus facile, j’ai ajouté quelques styles de base.

3 colonnes, qui sont pour l'instant 3 rangées

Par défaut, l’élément <section> prend 100% de la largeur de l’écran. Limitons sa largeur à 740px et pendant que nous y sommes, ajoutons un peu d’espace autour des colonnes.

//CSS
section {
  max-width: 740px;
  margin: 0 auto;
}

.column {
  margin: 10px;
}
un peu d'espace autour de nos 3 rangées

Essayez de réduire la fenêtre de votre navigateur jusqu’à ce que la largeur devienne inférieure à 740px et remarquez que <section> devient plus petit à mesure que l’écran se réduit, mais qu’il garde une largeur fixe lorsque la largeur de l’écran est supérieure à 740px.

Ajouter de la flexibilité

Transformons notre <section> en container flex comme nous l’avons appris dans la première leçon.

//CSS
section {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
}
3 rangées, devenues 3 colonnes rabougries
Chérie, Flexbox a rapetissé mes colonnes !

Par défaut, flexbox règle la largeur des colonnes sur la taille de leur contenu. Nous pouvons modifier ce comportement en utilisant les propriétés flex-grow et flex-shrink.

La propriété flex-grow indique à flexbox la façon dont il doit augmenter la taille de l’item pour occuper plus d’espace si nécessaire. La propriété flex-shrink indique à flexbox comment réduire cette taille si nécessaire. Comme nous voulons que nos colonnes se comportent de la même façon lorsqu’elles s’agrandissent ou se rapetissent, donnons à nos deux propriétés la valeur 1.

//CSS
.column {
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
}
3 colonnes de largeur égale

Woohoo ! Notre container flexbox occupe maintenant trois colonnes. Les valeurs de flex-grow et de flex-shrink sont proportionnelles, ce qui signifie qu’elles changent en fonction des valeurs des autres items. Flexbox fait la somme des valeurs données à chaque item, puis divise chaque valeur par cette somme. Chaque colonne occupe donc 1 ÷ (1 + 1 + 1) soit 1/3 de l’espace total. Que se passe-t-il si l’une des colonnes a une valeur différente ?

//CSS
.column:first-of-type {
  flex-grow: 2;
  flex-shrink: 2;
}
la 1ère colonne est 2 fois plus large

La première colonne prend la même quantité d’espace que les deux autres réunies. La raison en est que la somme des valeurs est égale à 4, donc la première colonne occupe 2 ÷ (2 + 1 + 1), c’est à dire 1/2, et les deux autres occupent 1 ÷ (2 + 1 + 1), c’est à dire 1/4 de l’espace.

C’est une question de basis

Si vous regardez attentivement le dernier exemple, vous verrez que la première colonne n’occupe pas tout à fait la moitié du container. Si nous ajoutons plus de contenu à à la troisième colonne, nous allons voir clairement le problème.

//HTML
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">
    The third column, with more content than before!
  </div>
</section>
la 3e colonne prend trop d'espace

Que se passe-t-il ?? Pourquoi flexbox n’est-il pas flexible ?

Eh bien en fait, il se trouve que flexbox ne répartit pas l’espace de manière égale entre les colonnes. Il cherche d’abord à savoir de combien d’espace chaque colonne a besoin, puis répartit l’espace qui reste via les propriétés flex-grow et flex-shrink. C’est la propriété flex-basis qui a la responsabilité de déterminer l’espace de départ dont dispose un item avant que l’espace résiduel soit réparti.

Cela semble peut-être un peu confus, et pour tout dire ça l’est. La façon dont ce truc est construit est sacrément compliquée, mais ne vous inquiétez pas, vous n’avez pas besoin de comprendre toutes les nuances pour utiliser flexbox.

Dans la mesure où nous ne nous soucions pas de l’espace d’origine, tout ce que nous avons à faire est de régler flex-basis sur la valeur 0 pour indiquer à flexbox qu’il doit ignorer la taille par défaut du container.

//CSS
.column {
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.column:first-of-type {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 0;
}
on retrouve les bonnes proportions

Ta-daaah ! Ça marche ! Enfin… à peu près, il nous reste une dernière petite chose à régler.

Encore plus de flex-basis

Si nous ajoutons une autre section sous la première, nous voyons tout de suite le problème :

//HTML
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
</section>
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
  <div class="column">Fourth</div>
</section>


//CSS
.column {
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

section:first-of-type .column:first-of-type {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 0;
}
les colonnes de la 2e rangée ne s'alignent pas sur la 1ére

Vous avez remarqué que les colonnes ne s’alignent pas ? C’est parce que flexbox inclut le padding, les bordures et les marges dans le basis lorsqu’il calcule la taille que devrait faire l’item.

La première et la deuxième colonne de la deuxième rangée sont séparées par 22 pixels (20px pour la gouttière et 2px pour les bordures). Nous pouvons ajouter cet espace manquant dans la première colonne de la première rangée en fixant flex-basis à 22px.

//CSS
section:first-of-type .column:first-of-type {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 22px;
}
les colonnes s'alignent correctement sur le plan vertical

Ensemble, flex-grow, flex-shrink et flex-basis forment la pierre angulaire de la flexibilité de flexbox (ça fait beaucoup de flex). Comme ces propriétés sont très liées, flex propose une propriété raccourcie qui vous permet de régler les trois. Vous pouvez l’utiliser ainsi :

flex: <flex-grow> <flex-shrink> <flex-basis>;

Nous pouvons réécrire notre CSS :

//CSS
.column {
  flex: 1 1 0;
}

section:first-of-type .column:first-of-type {
  flex: 2 2 22px;
}

Aaah, c’est mieux, non ?

Devoirs de vacances

Avec tout ce que nous avons appris dans cette introduction aux layouts, vous pouvez maintenant écrire une grille sur 12 colonnes complète ! Votre mission est de construire la mise en page depuis le commencement.

système de grille complet

Lorsque vous aurez terminé, vous pouvez regarder ce CodePen pour voir comment je l’ai réalisée.

Pour conclure

Et voilà ! Nous avons vu pas mal de choses passionnantes dans ce tutoriel, dont les propriétés flex-grow, flex-shrink et flex-basis. Nous avons également vu comment réaliser une mise en page sur 12 colonnes grâce à elles.

Si vous vous sentez un peu dépassé, ne vous inquiétez pas. Ces propriétés sont les plus difficiles à comprendre dans flexbox. Nous allons les voir à nouveau, dans des contextes différents, dans les articles à venir. Comme toujours, si vous avez des questions, contactez-moi.

Dans le prochain article, nous allons nous avancer au-delà des mises en pages sur 12 colonnes. Je vais vous montrer comment faire avec flexbox des choses impossibles à réaliser avec les systèmes de grilles habituels. D’ici là, amusez-vous bien !

Mon livre Unraveling Flexbox va encore plus loin dans les mises en pages et les systèmes de grilles. Vous y apprendrez comment construire des mises en pages responsives qui fonctionnent sur les smartphones et et comment traiter les navigateurs anciens qui ne sont pas compatibles avec flexbox.

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

Sur les systèmes de grilles
The Grid System, the ultimate resource in grid systems

Sur Flexbox
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 ?”


Article original paru le dans Flexbox Starter Course, la newsletter de Landon Schropp.

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 l’auteur.
Copyright Landon Schropp © 2015.