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-pack/index.md | 129 ++++++++++++++++++------------------- 1 file changed, 63 insertions(+), 66 deletions(-) (limited to 'files/fr/web/css/box-pack/index.md') diff --git a/files/fr/web/css/box-pack/index.md b/files/fr/web/css/box-pack/index.md index 45fd486ed7..ac0ce20858 100644 --- a/files/fr/web/css/box-pack/index.md +++ b/files/fr/web/css/box-pack/index.md @@ -8,15 +8,14 @@ tags: - Reference translation_of: Web/CSS/box-pack --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -
-

Attention : Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version.

-
+> **Attention :** Cette propriété fait partie de la première version du standard pour les boîtes flexibles (_flexbox_) et sera remplacée dans une prochaine version. -
Les propriétés CSS -moz-box-pack et -webkit-box-pack définissent la façon dont une boîte -moz-box ou -webkit-box 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 Flexbox qui décrit les différentes propriétés des boîtes flexibles.
+Les propriétés CSS **`-moz-box-pack`** et **`-webkit-box-pack`** définissent la façon dont une boîte `-moz-box` ou `-webkit-box` 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 [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) qui décrit les différentes propriétés des boîtes flexibles. -
/*  Valeurs avec un mot-clé */
+```css
+/*  Valeurs avec un mot-clé */
 box-pack: start;
 box-pack: center;
 box-pack: end;
@@ -26,38 +25,37 @@ box-pack: justify;
 box-pack: inherit;
 box-pack: initial;
 box-pack: unset;
-
+``` -

Voir la page Flexbox pour plus d'informations.

+Voir la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) pour plus d'informations. -

La direction de la disposition dépend de l'orientation de l'élément : horizontale ou verticale.

+La direction de la disposition dépend de l'orientation de l'élément : horizontale ou verticale. -

Syntaxe

+## Syntaxe -

Cette propriété se définit grâce à l'un des mots-clés définis ci-après.

+Cette propriété se définit grâce à l'un des mots-clés définis ci-après. -

Valeurs

+### Valeurs -
-
start
-
La boîte regroupe son contenu au début. L'espace restant est donc laissé à la fin.
-
center
-
La boîte regroupe son contenu au centre. L'espace restant est divisé de façon égale entre le début et la fin.
-
end
-
La boîte regroupe son contenu à la fin. L'espace restant est donc laissé au début.
-
justify
-
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 start.
-
+- `start` + - : La boîte regroupe son contenu au début. L'espace restant est donc laissé à la fin. +- `center` + - : La boîte regroupe son contenu au centre. L'espace restant est divisé de façon égale entre le début et la fin. +- `end` + - : La boîte regroupe son contenu à la fin. L'espace restant est donc laissé au début. +- `justify` + - : 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 `start`. -

Syntaxe formelle

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

Exemples

+## Exemples -

CSS

+### CSS -
div.exemple {
+```css
+div.exemple {
   border-style: solid;
 
   display: -moz-box; /* Mozilla */
@@ -88,60 +86,59 @@ div.exemple p {
      qu'il y ait de la place pour box-align */
   width: 200px;
 }
-
+``` -

HTML

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

Je serai 2nd en partant du bas de div.exemple, centré horizontalement.

+

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

+
+``` -

Résultat

+### Résultat -

{{EmbedLiveSample('Exemples', 310, 310)}}

+{{EmbedLiveSample('Exemples', 310, 310)}} -

Notes

+## Notes -

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 :

+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 : - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + +
 NormalInverse
Horizontalgauchedroit
Verticalhaubas
 NormalInverse
Horizontalgauchedroit
Verticalhaubas
-

Si le regroupement utilise l'attribut pack de l'élément, le style est ignoré.

+Si le regroupement utilise l'attribut `pack` de l'élément, le style est ignoré. -

Spécifications

+## Spécifications -

Cette propriété n'est pas standard mais une propriété semblable est apparue avec les brouillons de spécification pour les boîtes flexibles CSS3 et a été remplacée dans les versions suivantes de la spécification.

+Cette propriété n'est pas standard mais une propriété semblable est apparue [avec les brouillons de spécification pour les boîtes flexibles CSS3](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/) et a été remplacée dans les versions suivantes de la spécification. -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -
{{Compat("css.properties.box-pack")}}
+{{Compat("css.properties.box-pack")}} -

Voir aussi

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