diff options
Diffstat (limited to 'files/fr/web/css/box-flex/index.html')
| -rw-r--r-- | files/fr/web/css/box-flex/index.html | 110 |
1 files changed, 110 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p class="warning">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 <code>box-flex</code> ni au comportement de <code>-webkit-box-flex</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p> + +<p>Les propriétés <strong><code>-moz-box-flex</code></strong> et <strong><code>-webkit-box-flex</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> 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 <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> + +<pre class="brush:css no-line-numbers">/* 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; +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code><number></code></dt> + <dd>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.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="exemple"> + <p>Je m'étends sur l'espace.</p> + <p>Je ne me dilate pas.</p> +</div> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","200")}}</p> + +<h2 id="Notes">Notes</h2> + +<p>La boîte englobante distribue l'espace supplémentaire en fonction de la valeur de <code>flex</code> 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.</p> + +<p>Les éléments qui possèdent le même coefficient grandiront de la même façon.</p> + +<p>Si la valeur de cette propriété est définie via l'attribut XUL <code>flex</code>, 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 <code>equalsize</code> avec la valeur <code>always</code>. Il n'existe pas de propriété CSS correspondante.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette propriété n'est pas une propriété standard. <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Une ancienne version de la spécification CSS3 pour les boîtes flexibles</a> définissait une propriété <code>box-flex</code> mais ce brouillon a depuis été remplacé.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<div>{{Compat("css.properties.box-flex")}}</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("box-orient")}},</li> + <li>{{cssxref("box-pack")}},</li> + <li>{{cssxref("box-direction")}},</li> + <li>{{cssxref("flex")}}.</li> +</ul> |