diff options
Diffstat (limited to 'files/fr/web/css/box-align/index.md')
| -rw-r--r-- | files/fr/web/css/box-align/index.md | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/files/fr/web/css/box-align/index.md b/files/fr/web/css/box-align/index.md new file mode 100644 index 0000000000..731682f8ba --- /dev/null +++ b/files/fr/web/css/box-align/index.md @@ -0,0 +1,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 > 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"><div class="exemple"> + <p>Je serai deuxième en partant du bas, centré horizontalement.</p> + <p>Je serai en bas de div.exemple, centré horizontalement.</p> +</div></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> |