blob: d6f70ddfbc36cf733f4632303a61f20e9364249d (
plain)
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
---
title: box-pack
slug: Web/CSS/box-pack
tags:
- CSS
- Non-standard
- Propriété
- Reference
translation_of: Web/CSS/box-pack
---
<div>{{CSSRef}}{{Non-standard_header}}</div>
<div class="blockIndicator warning">
<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
</div>
<div>Les propriétés CSS <strong><code>-moz-box-pack</code></strong> et <strong><code>-webkit-box-pack</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> groupe son contenu dans la direction de la disposition. L'effet de cette propriété n'est visible que s'il reste de l'espace supplémentaire dans la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</div>
<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
box-pack: start;
box-pack: center;
box-pack: end;
box-pack: justify;
/* Valeurs globales */
box-pack: inherit;
box-pack: initial;
box-pack: unset;
</pre>
<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p>
<p>La direction de la disposition dépend de l'orientation de l'élément : horizontale ou verticale.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<p>Cette propriété se définit grâce à l'un des mots-clés définis ci-après.</p>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>start</code></dt>
<dd>La boîte regroupe son contenu au début. L'espace restant est donc laissé à la fin.</dd>
<dt><code>center</code></dt>
<dd>La boîte regroupe son contenu au centre. L'espace restant est divisé de façon égale entre le début et la fin.</dd>
<dt><code>end</code></dt>
<dd>La boîte regroupe son contenu à la fin. L'espace restant est donc laissé au début.</dd>
<dt><code>justify</code></dt>
<dd>L'espace est réparti entre chacun des éléments fils sans qu'un espace soit placé avant le premier fils ou après le dernier. S'il y a un seul élément fils, la valeur est synonyme de <code>start</code>.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div.exemple {
border-style: solid;
display: -moz-box; /* Mozilla */
display: -webkit-box; /* WebKit */
/* On rend la boîte plus grande que son
contenu pour avoir de l'espace pour box-pack */
height: 300px;
/* On rend la boîte suffisament large pour que
contenu soit centré horizontalemen */
width: 300px;
/* On oriente les éléments fils verticalement */
-moz-box-orient: vertical; /* Mozilla */
-webkit-box-orient: vertical; /* WebKit */
/* On aligne les fils sur le centre horizontal */
-moz-box-align: center; /* Mozilla */
-webkit-box-align: center; /* WebKit */
/* On groupe les éléments fils en bas de la boîte */
-moz-box-pack: end; /* Mozilla */
-webkit-box-pack: end; /* WebKit */
}
div.exemple p {
/* On réduit les éléments fils, pour
qu'il y ait de la place pour box-align */
width: 200px;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div class="exemple">
<p>Je serai 2nd en partant du bas de div.exemple, centré horizontalement.</p>
<p>Je serai tout en bas de div.exemple, centré horizontalement.</p>
</div>
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples', 310, 310)}}</p>
<h2 id="Notes">Notes</h2>
<p>Le « début » et la « fin » de la boîte dépendent de l'orientation et de la direction de la boîte. Voici le tableau indiquant le début de la boîte en fonction de l'orientation et de la direction :</p>
<table class="standard-table">
<tbody>
<tr>
<th> </th>
<th><strong>Normal</strong></th>
<th><strong>Inverse</strong></th>
</tr>
<tr>
<th><strong>Horizontal</strong></th>
<td>gauche</td>
<td>droit</td>
</tr>
<tr>
<th><strong>Vertical</strong></th>
<td>hau</td>
<td>bas</td>
</tr>
</tbody>
</table>
<p>Si le regroupement utilise l'attribut <code>pack</code> de l'élément, le style est ignoré.</p>
<h2 id="Spécifications">Spécifications</h2>
<p>Cette propriété n'est pas standard mais une propriété semblable est apparue <a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">avec les brouillons de spécification pour les boîtes flexibles CSS3</a> et a été remplacée dans les versions suivantes de la spécification.</p>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<div>{{Compat("css.properties.box-pack")}}</div>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("box-orient")}},</li>
<li>{{cssxref("box-direction")}},</li>
<li>{{cssxref("box-align")}}</li>
</ul>
|
