Les propriétés raccourcies

Un conteneur qui dispose ses éléments en colonne et les fait passer à la ligne, cela fait deux déclarations séparées. Un élément qui doit grandir, ne jamais rétrécir et partir de 200 pixels, cela en fait trois de plus. Dans une feuille de style qui compte des dizaines de règles, ces lignes se multiplient comme les rouleaux dans les archives d'un temple. Les scribes égyptiens connaissaient la solution : à côté des hiéroglyphes, ils utilisaient l'écriture hiératique, une forme plus rapide et simplifiée des mêmes signes. Le CSS a lui aussi des formes raccourcies, et dans Flexbox, deux d'entre elles comptent plus que les autres : flex pour les éléments et flex-flow pour le conteneur.

Le raccourci flex - trois valeurs en une

La propriété flex définit d'un coup trois propriétés d'un élément flex, toujours dans le même ordre :

• flex-grow détermine comment l'élément doit s'agrandir lorsqu'il reste de l'espace libre dans le conteneur,
• flex-shrink détermine comment l'élément doit rétrécir lorsque la place manque,
• flex-basis détermine la taille initiale de l'élément, avant que le navigateur ne commence à l'agrandir ou à le rétrécir.

La syntaxe formelle de la documentation est la suivante : flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]. Une barre verticale simple signifie « ou », un point d'interrogation marque une valeur facultative, et une double barre indique que les parties peuvent apparaître dans n'importe quel ordre. Malgré cela, respecte l'ordre grow, shrink, basis, car c'est ainsi que tout développeur lit cette écriture. Voyons le raccourci en action :

1.box {
2  flex: 1 0 200px;
3}

L'élément de classe box reçoit flex-grow: 1, il peut donc s'agrandir, flex-shrink: 0, il ne peut donc pas rétrécir, et flex-basis: 200px, c'est-à-dire qu'il part de 200 pixels. Ni le contenu ni le HTML de l'élément ne changent, car le raccourci ne fixe que les règles de dimensionnement. Attention à un détail : un élément avec flex-shrink: 0 ne descendra pas sous les 200 pixels, il peut donc dépasser du conteneur sur un écran étroit.

Les valeurs omises

Le raccourci ne doit pas forcément contenir trois valeurs. Tu rencontreras aussi des formes à une ou deux valeurs, comme flex: 1 ou flex: none. Les parties omises ne reprennent cependant pas les valeurs par défaut habituelles : flex: 1 met flex-basis à 0, et non à auto. Nous décortiquerons ces formes en détail dans la leçon suivante.

Le raccourci flex-flow - direction et retour à la ligne ensemble

Le second raccourci concerne le conteneur et réunit deux propriétés que tu connais déjà. flex-direction détermine la direction dans laquelle les éléments sont disposés dans le conteneur, et flex-wrap décide s'ils doivent passer à une nouvelle ligne quand la place manque. La syntaxe formelle est flex-flow: <'flex-direction'> || <'flex-wrap'>, et la valeur par défaut est row nowrap. Voici un exemple :

1.container {
2  flex-flow: column wrap;
3}

Le conteneur de classe container reçoit flex-direction: column, donc les éléments se disposent verticalement, et flex-wrap: wrap, donc ils passent à une nouvelle ligne quand la place vient à manquer. Dans une colonne, une nouvelle ligne, c'est une colonne supplémentaire placée à côté, et le retour à la ligne ne fonctionne que si le conteneur a une hauteur limitée. Sans elle, la colonne s'allonge simplement vers le bas. Le plus souvent, tu rencontreras toutefois flex-flow: row wrap, c'est-à-dire une rangée horizontale qui passe à la ligne comme les étagères successives d'une salle du trésor.

Le raccourci et align-content

Quand flex-flow contient wrap, le conteneur peut se retrouver avec plusieurs lignes. Tu te rappelles, grâce à la leçon précédente, qui les gouverne ? align-content répartit des lignes entières le long de l'axe secondaire, de la même façon que justify-content répartit les éléments individuels le long de l'axe principal. Cette propriété ne fonctionne que dans un conteneur où le retour à la ligne est activé :

1.container {
2  display: flex;
3  flex-flow: row wrap;
4  align-content: center;
5  height: 400px;
6}

Les rangées d'éléments se regroupent au milieu du conteneur, qui est haut. La hauteur est nécessaire ici, car align-content ne répartit que l'espace libre sur l'axe secondaire. Les éléments d'une même rangée restent positionnés par align-items, tandis que align-content déplace des rangées entières à la fois.

Quand utiliser les raccourcis ?

Les formes raccourcies permettent de décrire de façon plus concise la flexibilité et la disposition des éléments, et le code CSS devient plus lisible. Mon conseil : utilise flex chaque fois que tu définis plus d'une des trois valeurs. La spécification de Flexbox recommande elle-même le raccourci plutôt que les propriétés séparées, car il règle aussi correctement ce que tu n'as pas écrit. Pour flex-flow, cela dépend : quand tu modifies les deux réglages, le raccourci est pratique, mais quand tu veux seulement le retour à la ligne, flex-wrap: wrap seul en dit davantage. Dans la leçon suivante, nous décortiquerons flex et calculerons comment le navigateur répartit l'espace libre.

Dans l'éditeur ci-dessous, chaque rangée montre une valeur différente de flex-basis. Remplace les paires flex-basis et flex-grow par un seul raccourci, par exemple flex: 1 1 100px, et vérifie que la mise en page ne change pas.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Flexbox - Flex Basis</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Flex Basis - Taille de base des éléments</h1>
12        <p class="subtitle">Définis la taille initiale d'un élément avant la répartition de l'espace</p>
13
14        <section class="demo-section">
15            <h2>flex-basis: auto (par défaut)</h2>
16            <div class="flex-container">
17                <div class="flex-item basis-auto">Court</div>
18                <div class="flex-item basis-auto">Texte plus long dans l'élément</div>
19                <div class="flex-item basis-auto">Moyen</div>
20            </div>
21            <p class="description">La taille est basée sur le contenu de l'élément</p>
22        </section>
23
24        <section class="demo-section">
25            <h2>flex-basis: 0</h2>
26            <div class="flex-container">
27                <div class="flex-item basis-zero grow">Court</div>
28                <div class="flex-item basis-zero grow">Texte plus long dans l'élément</div>
29                <div class="flex-item basis-zero grow">Moyen</div>
30            </div>
31            <p class="description">Tous les éléments partent de zéro et grandissent uniformément</p>
32        </section>
33
34        <section class="demo-section">
35            <h2>flex-basis: valeurs fixes</h2>
36            <div class="flex-container">
37                <div class="flex-item basis-100">basis: 100px</div>
38                <div class="flex-item basis-200">basis: 200px</div>
39                <div class="flex-item basis-150">basis: 150px</div>
40            </div>
41            <p class="description">Chaque élément a une taille de base définie</p>
42        </section>
43
44        <section class="demo-section">
45            <h2>flex-basis: pourcentages</h2>
46            <div class="flex-container">
47                <div class="flex-item basis-25">25%</div>
48                <div class="flex-item basis-50">50%</div>
49                <div class="flex-item basis-25">25%</div>
50            </div>
51            <p class="description">Tailles de base en pourcentage du conteneur</p>
52        </section>
53
54        <section class="demo-section">
55            <h2>flex-basis + flex-grow</h2>
56            <div class="flex-container">
57                <div class="flex-item basis-100 grow">basis: 100px + grow: 1</div>
58                <div class="flex-item basis-50 grow">basis: 50px + grow: 1</div>
59                <div class="flex-item basis-100 grow">basis: 100px + grow: 1</div>
60            </div>
61            <p class="description">Les éléments partent de tailles différentes et grandissent uniformément</p>
62        </section>
63
64        <section class="demo-section practice">
65            <h2>Exercice : conteneurs égyptiens</h2>
66            <p class="practice-description">Stocker le grain dans des greniers de tailles de base différentes</p>
67
68            <div class="granary">
69                <div class="storage small-storage">
70                    <div class="lid">◓</div>
71                    <div class="content">
72                        <p>Petit grenier</p>
73                        <p class="size">basis: 80px</p>
74                    </div>
75                </div>
76
77                <div class="storage medium-storage">
78                    <div class="lid">◓</div>
79                    <div class="content">
80                        <p>Grenier moyen</p>
81                        <p class="size">basis: 150px</p>
82                    </div>
83                </div>
84
85                <div class="storage large-storage">
86                    <div class="lid">◓</div>
87                    <div class="content">
88                        <p>Grand grenier</p>
89                        <p class="size">basis: 220px</p>
90                    </div>
91                </div>
92
93                <div class="storage flexible-storage">
94                    <div class="lid">◓</div>
95                    <div class="content">
96                        <p>Flexible</p>
97                        <p class="size">basis: 0 + grow: 1</p>
98                    </div>
99                </div>
100            </div>
101        </section>
102    </div>
103</body>
104</html>

Retiens : un raccourci, c'est l'écriture hiératique du CSS - le même sens que l'écriture complète, simplement exprimé plus vite et de façon plus concise.