From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/box-align/index.md | 101 ++++++++++++++++++------------------ 1 file changed, 50 insertions(+), 51 deletions(-) (limited to 'files/fr/web/css/box-align') diff --git a/files/fr/web/css/box-align/index.md b/files/fr/web/css/box-align/index.md index 731682f8ba..05cde59401 100644 --- a/files/fr/web/css/box-align/index.md +++ b/files/fr/web/css/box-align/index.md @@ -8,11 +8,12 @@ tags: - Reference translation_of: Web/CSS/box-align --- -
{{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.")}}
+{{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.")}} -

La propriété CSS box-align 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 Flexbox pour plus d'informations.

+La propriété CSS **`box-align`** 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 [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS "CSS/Flexible_boxes") pour plus d'informations. -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 box-align: start;
 box-align: center;
 box-align: end;
@@ -23,38 +24,37 @@ box-align: stretch;
 box-lines: inherit;
 box-lines: initial;
 box-lines: unset;
-
+``` -

La direction de l'élément dépend de son orientation.

+La direction de l'élément dépend de son orientation. -

Syntaxe

+## Syntaxe -

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

+La propriété `box-align` est paramétrée grâce à l'un des mots-clés suivants. -

Valeurs

+### Valeurs -
-
start
-
La boîte aligne son contenu au début (l'espace restant est alors situé à la fin).
-
center
-
La boîte aligne son contenu sur le centre (l'espace restant est équitablement réparti entre le début et la fin).
-
end
-
La boîte aligne son contenu au début (l'espace restant est alors situé au début).
-
baseline
-
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.
-
stretch
-
Les boîtes s'étirent afin qu'il n'y ait plus d'espace restant dans la boîte.
-
+- `start` + - : La boîte aligne son contenu au début (l'espace restant est alors situé à la fin). +- `center` + - : La boîte aligne son contenu sur le centre (l'espace restant est équitablement réparti entre le début et la fin). +- `end` + - : La boîte aligne son contenu au début (l'espace restant est alors situé au début). +- `baseline` + - : 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. +- `stretch` + - : Les boîtes s'étirent afin qu'il n'y ait plus d'espace restant dans la boîte. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
div.exemple {
+```css
+div.exemple {
   display: box;
   display: -moz-box; /* Mozilla */
   display: -webkit-box; /* WebKit */
@@ -86,47 +86,46 @@ box-lines: unset;
   -webkit-box-pack: end; /* WebKit */
 }
 
-div.exemple > p {
+div.exemple > p {
   /* On réduit les éléments fils pour que
      box-align ait un impact. */
   width: 200px;
-}
+} +``` -

HTML

+### 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>
+```html +
+

Je serai deuxième en partant du bas, centré horizontalement.

+

Je serai en bas de div.exemple, centré horizontalement.

+
+``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples","500","500")}}

+{{EmbedLiveSample("Exemples","500","500")}} -

Notes

+## Notes -

Le bord de la boîte qui est indiqué par start 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 end est le côté opposé à start.

+Le bord de la boîte qui est indiqué par `start` 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 `end` est le côté opposé à `start`. -

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

+Si l'alignement est défini via l'attribut HTML `align`, la déclaration sera alors ignorée. -

Spécifications

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.properties.box-align")}}

+{{Compat("css.properties.box-align")}} -

Voir aussi

+## Voir aussi - +- {{cssxref("align-items")}}, +- {{cssxref("box-orient")}}, +- {{cssxref("box-direction")}}, +- {{cssxref("box-pack")}}. -- cgit v1.2.3-54-g00ecf