From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/box-flex/index.html | 110 +++++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 files/fr/web/css/box-flex/index.html (limited to 'files/fr/web/css/box-flex/index.html') diff --git a/files/fr/web/css/box-flex/index.html b/files/fr/web/css/box-flex/index.html new file mode 100644 index 0000000000..9a84412069 --- /dev/null +++ b/files/fr/web/css/box-flex/index.html @@ -0,0 +1,110 @@ +--- +title: box-flex +slug: Web/CSS/box-flex +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/box-flex +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Cette propriété est utilisée pour contrôler certaines parties du modèle de boîtes XUL. Elle ne correspond ni à l'ancienne version de la spécification pour box-flex ni au comportement de -webkit-box-flex. Voir la page Flexbox pour plus d'informations sur ce qui doit être utilisé à la place.

+ +

Les propriétés -moz-box-flex et -webkit-box-flex définissent la façon dont une boîte -moz-box ou -webkit-box s'étend pour remplir la boîte englobante, dans la direction indiquée par la disposition de 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.

+ +
/* Valeurs numériques */
+/* Type <number>      */
+-moz-box-flex: 0;
+-moz-box-flex: 2;
+-moz-box-flex: 3.5;
+-webkit-box-flex: 0;
+-webkit-box-flex: 2;
+-webkit-box-flex: 3.5;
+
+/* Valeurs globales */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+-webkit-box-flex: inherit;
+-webkit-box-flex: initial;
+-webkit-box-flex: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
<number>
+
Une valeur de type {{cssxref("<number>")}}. Si la valeur vaut 0, la boîte ne s'étend pas. Si elle est supérieure à 0, la boîte s'étendra sur l'espace disponible de façon proportionnelle.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div.exemple {
+  display: -moz-box;
+  display: -webkit-box;
+  border: 1px solid black;
+  width: 100%;
+}
+
+div.exemple > p:nth-child(1) {
+  -moz-box-flex: 1; /* Mozilla */
+  -webkit-box-flex: 1; /* WebKit */
+  border: 1px solid black;
+}
+
+div.exemple > p:nth-child(2) {
+  -moz-box-flex: 0; /* Mozilla */
+  -webkit-box-flex: 0; /* WebKit */
+  border: 1px solid black;
+}
+ +

HTML

+ +
<div class="exemple">
+  <p>Je m'étends sur l'espace.</p>
+  <p>Je ne me dilate pas.</p>
+</div>
+
+ +

Résultat

+ +

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

+ +

Notes

+ +

La boîte englobante distribue l'espace supplémentaire en fonction de la valeur de flex de chaque élément. Les éléments pour lesquels ce coefficient est nul ne s'agrandiront pas. Si un seul élément possède un coefficient non nul, celui-ci occupera l'espace supplémentaires.

+ +

Les éléments qui possèdent le même coefficient grandiront de la même façon.

+ +

Si la valeur de cette propriété est définie via l'attribut XUL flex, la déclaration est ignorée. Afin que les éléments XUL d'une même boîte aient la même taille, on utilisera l'attribut equalsize avec la valeur always. Il n'existe pas de propriété CSS correspondante.

+ +

Spécifications

+ +

Cette propriété n'est pas une propriété standard. Une ancienne version de la spécification CSS3 pour les boîtes flexibles définissait une propriété box-flex mais ce brouillon a depuis été remplacé.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

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

Voir aussi

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