files/fr/web/css/box-align/index.md


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

---
title: box-align
slug: Web/CSS/box-align
tags:
  - CSS
  - Non-standard
  - Propriété
  - Reference
translation_of: Web/CSS/box-align
---
<div>{{CSSRef}}{{Non-standard_header}}{{warning("Cette propriété s'inscrivait dans une ancienne version du standard pour le module CSS sur les boîtes flexibles et a été remplacée dans une nouvelle version du standard.")}}</div>

<p>La propriété CSS <strong><code>box-align</code></strong> définit comment un élément aligne son contenu par rapport à l'axe orthogonal à la disposition. L'effet obtenu ne sera visible que s'il y a de l'espace supplémentaire dans la boîte flexible. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS" title="CSS/Flexible_boxes">Flexbox</a> pour plus d'informations.</p>

<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
box-align: start;
box-align: center;
box-align: end;
box-align: baseline;
box-align: stretch;

/* Valeurs globales */
box-lines: inherit;
box-lines: initial;
box-lines: unset;
</pre>

<p>La direction de l'élément dépend de son orientation.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<p>La propriété <code>box-align</code> est paramétrée grâce à l'un des mots-clés suivants.</p>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>start</code></dt>
 <dd>La boîte aligne son contenu au début (l'espace restant est alors situé à la fin).</dd>
 <dt><code>center</code></dt>
 <dd>La boîte aligne son contenu sur le centre (l'espace restant est équitablement réparti entre le début et la fin).</dd>
 <dt><code>end</code></dt>
 <dd>La boîte aligne son contenu au début (l'espace restant est alors situé au début).</dd>
 <dt><code>baseline</code></dt>
 <dd>La boîte aligne les lignes de base des contenus (le texte sera sur la même ligne). Cela ne s'applique que si l'orientation de la boîte est horizontale.</dd>
 <dt><code>stretch</code></dt>
 <dd>Les boîtes s'étirent afin qu'il n'y ait plus d'espace restant dans la boîte.</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 {
  display: box;
  display: -moz-box; /* Mozilla */
  display: -webkit-box; /* WebKit */

  /* La boîte est plus grande que ses
     éléments afin que box-pack ait
     un effet */
  height: 400px;

  /* La boîte est plus large que ses
     éléments afin que box-align ait
     un effet */
  width: 300px;

  /* Les éléments fils seront orientés
     verticalement */
  box-orient: vertical;
  -moz-box-orient: vertical; /* Mozilla */
  -webkit-box-orient: vertical; /* WebKit */

  /* On centre les éléments horizontalement */
  box-align: center;
  -moz-box-align: center; /* Mozilla */
  -webkit-box-align: center; /* WebKit */

  /* On les regroupe vers le bas */
  box-pack: end;
  -moz-box-pack: end; /* Mozilla */
  -webkit-box-pack: end; /* WebKit */
}

div.exemple &gt; p {
  /* On réduit les éléments fils pour que
     box-align ait un impact. */
  width: 200px;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="exemple"&gt;
  &lt;p&gt;Je serai deuxième en partant du bas, centré horizontalement.&lt;/p&gt;
  &lt;p&gt;Je serai en bas de div.exemple, centré horizontalement.&lt;/p&gt;
&lt;/div&gt;</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample("Exemples","500","500")}}</p>

<h2 id="Notes">Notes</h2>

<p>Le bord de la boîte qui est indiqué par <code>start</code> dépend de l'orientation de la boîte : si celle-ci est orientée horizontalement, ce sera le côté haut, si elle est orientée verticalement, ce sera le côté bas. Le côté désigné par <code>end</code> est le côté opposé à <code>start</code>.</p>

<p>Si l'alignement est défini via l'attribut HTML <code>align</code>, la déclaration sera alors ignorée.</p>

<h2 id="Spécifications">Spécifications</h2>

<ul>
 <li><a href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
 <li><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
</ul>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.properties.box-align")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{cssxref("align-items")}},</li>
 <li>{{cssxref("box-orient")}},</li>
 <li>{{cssxref("box-direction")}},</li>
 <li>{{cssxref("box-pack")}}.</li>
</ul>