1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
---
title: Répartir et équilibrer le contenu entre les colonnes
slug: Web/CSS/CSS_Columns/Spanning_Columns
tags:
- CSS
- Guide
translation_of: Web/CSS/CSS_Columns/Spanning_Columns
original_slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes
---
<div>{{CSSRef}}</div>
<p>Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.</p>
<div class="note">
<p><strong>Note :</strong> Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.</p>
</div>
<h2 id="Étendre_sur_plusieurs_colonnes">Étendre sur plusieurs colonnes</h2>
<p>Afin qu'un élément s'étende sur plusieurs colonnes, on peut utiliser la propriété {{cssxref("column-span")}} avec la valeur <code>all</code>. Ainsi, l'élément concerné s'étendra sur l'ensemble des colonnes.</p>
<p>N'importe quel élément descendant du conteneur multi-colonnes peut être étendu de cette façon, que ce soit un titre qui est un élément fils direct ou un titre contenu dans une section contenue dans le conteneur.</p>
<p>Dans l'exemple qui suit, on a <code>column-span: all</code> appliqué sur l'élément <code>h2</code> qui s'étend ainsi sur toutes les colonnes.</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}</p>
<p>Dans ce deuxième exemple, le titre est à l'intérieur de l'élément {{HTMLElement("article")}} mais le contenu est bien réparti comme voulu.</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}</p>
<p>Lorsqu'un élément est étendu, il brise le flux des colonnes et un nouvel ensemble de boîtes de colonnes sont créées. Ce n'est pas le contenu qui « reprend » sous l'élément étendu.</p>
<h3 id="Les_limites_de_column-span">Les limites de <code>column-span</code></h3>
<p>Avec la spécification de niveau 1, seules deux valeurs sont autorisées pour <code>column-span</code> : <code>none</code> qui est la valeur initiale et qui indique que l'élément ne s'étendra pas (il restera sur une colonne) et <code>all</code> qui indiquera que l'élément s'étendra sur l'ensemble des colonnes. Ainsi, on ne pourra pas étendre spécifiquement un élément sur deux ou trois colonnes.</p>
<h3 id="Quelques_points_d'attention">Quelques points d'attention</h3>
<p>Si l'élément qui s'étend est à l'intérieur d'un élément qui possède des marges, du remplissage et une bordure ou une couleur d'arrière-plan, on pourra avoir l'élément qui s'étend et qui recouvre le reste. Aussi, attention à bien gérer ce cas lorsqu'on étend un élément sur plusieurs colonnes.</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}</p>
<p>De plus, si un élément qui s'étend sur les colonnes se retrouve plus loin dans le contenu, on peut avoir un comportement hasardeux s'il n'y a pas assez de contenu après l'élément étendu pour créer d'autres colonnes. Aussi, mieux vaudra utiliser <code>column-span</code> avec précaution pour éviter ces effets indésirables.</p>
<h2 id="Équilibrer_et_remplir_les_colonnes">Équilibrer et remplir les colonnes</h2>
<p>Lorsque toutes les colonnes possèdent environ la même quantité de contenu, on parle d'un ensemble équilibré. On pourra jouer sur le remplissage et l'équilibrage des colonnes lorsque la quantité de contenu est inférieure à la quantité d'espace fournie, notamment lorsque le conteneur a une hauteur donnée.</p>
<p>La valeur initiale de la propriété {{cssxref("column-fill")}}, dans une disposition multi-colonnes, est <code>balance</code>. Cette valeur signifie que les colonnes doivent être aussi équilibrées que possible. Pour les contextes fragmentés tels que <a href="/fr/docs/Web/CSS/CSS_Pages">les médias paginés</a>, seul le dernier fragment est équilibré. Cela signifie que c'est sur la dernière page du document que l'ensemble des colonnes sera équilibré.</p>
<p>La valeur <code>balance-all</code> permet quant à elle d'avoir des colonnes équilibrées sur l'ensemble des fragments (et pas uniquement sur le dernier).</p>
<p>Dans cet exemple, on a des colonnes qui contiennent une image et du texte qui sont équilibrées. L'image ne peut pas être divisée et est placée dans la première colonne puis les colonnes suivantes contiennent du texte sur la même hauteur que l'image.</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}</p>
<p><code>auto</code> est une autre valeur qui peut être utilisée avec <code>column-fill</code>. Avec cette valeur, plutôt que d'équilibrer les colonnes, celles-ci sont remplies les unes après les autres. Dans ce dernier exemple, on a modifié <code>column-fill</code> pour utiliser <code>auto</code> et les colonnes sont désormais remplies dans l'ordre en suivant la hauteur du conteneur multi-colonnes. On a ainsi quelques colonnes vides à la fin.</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}</p>
<p>On notera que l'équilibrage des colonnes n'est pas pris en charge de façon homogène par les navigateurs. Aussi, si vous l'utilisez, vérifiez vos résultats dans les différents navigateurs pour contrôler l'effet obtenu. Vous pouvez aussi consulter les tableaux de compatibilité des navigateurs à la fin des pages de chacune des propriétés.</p>
<p>Dans le prochain guide, nous verrons <a href="/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol">comment gérer le dépassement au sein d'un conteneur multi-colonnes</a>, à l'intérieur des colonnes et lorsqu'il y a plus de contenu que le conteneur peut en avoir.</p>
|
