From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/box-align/index.md | 132 ++++++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 files/fr/web/css/box-align/index.md (limited to 'files/fr/web/css/box-align/index.md') 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 +--- +
{{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.

+ +
/* 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;
+
+ +

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

+ +

Syntaxe

+ +

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

+ +

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.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

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;
+}
+ +

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>
+ +

Résultat

+ +

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

+ +

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.

+ +

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

+ +

Spécifications

+ + + +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf