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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
---
title: Disposition en colonnes
slug: Web/CSS/Layout_cookbook/Column_layouts
tags:
- CSS
- Guide
- Multi-col
- flexbox
- grid
translation_of: Web/CSS/Layout_cookbook/Column_layouts
original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
---
<div>{{CSSRef}}</div>
<p>Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.</p>
<p><img alt="three different styles of layouts which have two columns in the container." src="cookbook-multiple-columns.png"></p>
<h2 id="Prérequis">Prérequis</h2>
<p>Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :</p>
<ul>
<li>Un fil continu qui se divise en colonne, à la façon d'un journal papier.</li>
<li>Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur.</li>
<li>Plusieurs lignes et colonnes qui sont alignées.</li>
</ul>
<h2 id="Les_«_recettes_»">Les « recettes »</h2>
<p>Selon le scénario souhaité, on utilisera différentes méthodes de disposition.</p>
<h3 id="Un_fil_continu_de_contenu_-_Disposition_multi-colonnes">Un fil continu de contenu - Disposition multi-colonnes</h3>
<p>En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.</p>
<p>L'espacement entre les colonnes peut être géré avec la propriété {{cssxref("column-gap")}} et il est possible d'ajouter une ligne de délimitation grâce à {{cssxref("column-rule")}}.</p>
<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}</p>
<div class="note">
<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">Télécharger cet exemple</a></p>
</div>
<p>On utilisera une disposition multi-colonnes lorsque :</p>
<ul>
<li>On souhaite organiser le texte à la façon d'un journal imprimé</li>
<li>On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes</li>
<li>Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme.</li>
</ul>
<h3 id="Une_seule_ligne_fragmentée_en_cellules_de_même_taille_—_Utilisation_des_boîtes_flexibles">Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles</h3>
<p>Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété {{cssxref("flex-direction")}} utilisée avec la valeur <code>row</code>. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.</p>
<p>À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés {{cssxref("column-gap")}} et {{cssxref("row-gap")}} est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.</p>
<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}</p>
<div class="note">
<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">Télécharger cet exemple</a></p>
</div>
<p>Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur <code>wrap</code> sur le conteneur. Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.</p>
<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}</p>
<div class="note">
<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">Télécharger cet exemple</a></p>
</div>
<p>On utilisera les boîtes flexibles pour :</p>
<ul>
<li>Organiser des lignes ou colonnes d'objets indépendantes</li>
<li>Aligner les objets sur l'axe orthogonal au sens de lecture</li>
<li>Les cas où l'alignement d'une ligne sur l'autre n'est pas important</li>
</ul>
<h3 id="Aligner_des_objets_en_lignes_et_colonnes_—_Utilisation_d'une_grille">Aligner des objets en lignes et colonnes — Utilisation d'une grille</h3>
<p>Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.</p>
<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}</p>
<div class="note">
<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">Télécharger cet exemple</a></p>
</div>
<p>On utiliser les grilles CSS lorsque :</p>
<ul>
<li>On a des éléments/objets à organiser sur plusieurs lignes et colonnes</li>
<li>On souhaite pouvoir aligner les éléments sur les deux axes</li>
</ul>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
<h3 id="column-width">column-width</h3>
<p>{{Compat("css.properties.column-width")}}</p>
<h3 id="column-rule">column-rule</h3>
<p>{{Compat("css.properties.column-rule")}}</p>
<h3 id="flex">flex</h3>
<p>{{Compat("css.properties.flex")}}</p>
<h3 id="flex-wrap">flex-wrap</h3>
<p>{{Compat("css.properties.flex-wrap")}}</p>
<h3 id="grid-template-columns">grid-template-columns</h3>
<p>{{Compat("css.properties.grid-template-columns")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/CSS/CSS_Columns">Guide pour les dispositions multi-colonnes</a></li>
<li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Guide pour les boîtes flexibles (<em>flexbox</em>)</a></li>
<li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Guide pour les grilles CSS</a></li>
</ul>
|
