diff options
Diffstat (limited to 'files/fr/web/css/flex/index.html')
| -rw-r--r-- | files/fr/web/css/flex/index.html | 299 |
1 files changed, 299 insertions, 0 deletions
diff --git a/files/fr/web/css/flex/index.html b/files/fr/web/css/flex/index.html new file mode 100644 index 0000000000..c88b0da7b0 --- /dev/null +++ b/files/fr/web/css/flex/index.html @@ -0,0 +1,299 @@ +--- +title: flex +slug: Web/CSS/flex +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/flex +--- +<div>{{CSSRef}}</div> + +<p>La propriété <strong><code>flex</code></strong> est une propriété raccourcie qui définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur.</p> + +<p>Les propriétés détaillées correspondantes à cette propriété raccourcie sont {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}.</p> + +<p>Les éléments flexibles peuvent être étirés ou réduits pour utiliser un espace proportionnel à leur coefficient de grossissement ou de rétrécissement afin de ne pas dépasser d'un conteneur.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Pour la plupart des cas, on utilisera une des valeurs suivantes : <code>auto</code>, <code>initial</code>, <code>none</code> ou un nombre positif sans unité. Pour voir l'effet de ces valeurs, essayez de redimensionner les conteneurs flexibles ci-après :</p> + +<div id="flex"> +<pre class="hidden brush: html notranslate"><div class="flex-container"> + + <div class="item auto">auto</div> + <div class="item auto">auto</div> + <div class="item auto">auto</div> + +</div> + +<div class="flex-container"> + + <div class="item auto">auto</div> + <div class="item initial">initial</div> + <div class="item initial">initial</div> + +</div> + +<div class="flex-container"> + + <div class="item auto">auto</div> + <div class="item auto">auto</div> + <div class="item none">none</div> + +</div> + +<div class="flex-container"> + + <div class="item initial">initial</div> + <div class="item none">none</div> + <div class="item none">none</div> + +</div> + +<div class="flex-container"> + + <div class="item four">4</div> + <div class="item two">2</div> + <div class="item one">1</div> + +</div> +</pre> + +<pre class="hidden brush: css notranslate">* { + box-sizing: border-box; +} + +.flex-container { + background-color: #F4F7F8; + resize: horizontal; + overflow: hidden; + display: flex; + margin: 1em; +} + +.item { + margin: 1em; + padding: 0.5em; + width: 110px; + min-width: 0; + background-color: #1B5385; + color: white; + font-family: monospace; +} + +.initial { + flex: initial; +} + +.auto { + flex: auto; +} + +.none { + flex: none; +} + +.four { + flex: 4; +} + +.two { + flex: 2; +} + +.one { + flex: 1; +} +</pre> + +<p>{{EmbedLiveSample("flex", "100%","370")}}</p> + +<div id="flex"> +<p>Par défaut, les éléments flexibles ne se rétrécissent pas en dessous de la taille minimale du contenu. Pour modifier ce comportement, il faudra paramétrer {{cssxref("min-width")}} ou {{cssxref("min-height")}}.</p> +</div> + +<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS" title="CSS/Using_CSS_flexible_boxes">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a> pour plus d'informations.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css no-line-numbers notranslate">/* Valeurs de base */ +flex: auto; +flex: initial; +flex: none; + +/* Une valeur sans unité pour flex-grow */ +/* flex-basis vaut alors 0 */ +flex: 2; + +/* Une valeur, largeur/hauteur: flex-basis */ +flex: 10em; +flex: 30px; +flex: content; + +/* Deux valeurs : flex-grow | flex-basis */ +flex: 1 30px; + +/* Deux valeurs : flex-grow | flex-shrink */ +/* flex-basis vaut alors 0 */ +flex: 2 2; + +/* Trois valeurs : flex-grow | flex-shrink | flex-basis */ +flex: 2 2 10%; + +/* Valeurs globales */ +flex: inherit; +flex: initial; +flex: unset; +</pre> + +<p>La propriété <code>flex</code> peut être définie avec une, deux ou trois valeurs.</p> + +<ul> + <li><strong>Avec une valeur</strong>, la syntaxe doit être : + + <ul> + <li>un nombre sans unité ({{cssxref("<number>")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#grow"><flex-grow></a></code></li> + <li>ou une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <code><a href="#basis"><flex-basis></a></code></li> + <li>ou le mot-clé <code><a href="#none">none</a></code>.</li> + </ul> + </li> + <li><strong>Avec deux valeurs</strong> + <ul> + <li>la première doit être un nombre sans unité ({{cssxref("<number>")}}) qui correspond à la valeur de <code><a href="#grow"><flex-grow></a></code>.</li> + <li>la seconde valeur doit être : + <ul> + <li>un nombre sans unité ({{cssxref("<number>")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#shrink"><flex-shrink></a></code></li> + <li>ou une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <code><a href="#basis"><flex-basis></a></code></li> + </ul> + </li> + </ul> + </li> + <li><strong>Avec trois valeurs</strong> + <ul> + <li>la première valeur doit être un nombre sans unité ({{cssxref("<number>")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#grow"><flex-grow></a></code></li> + <li>la deuxième valeur doit être un nombre sans unité ({{cssxref("<number>")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#shrink"><flex-shrink></a></code></li> + <li>la troisième valeur doit être une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <code><a href="#basis"><flex-basis></a></code></li> + </ul> + </li> +</ul> + +<h3 id="Valeurs">Valeurs</h3> + +<div id="flex"> +<dl> + <dt><code>auto</code></dt> + <dd>L'élément est dimensionné selon ses propriétés <code>width</code> et <code>height</code> mais peut grandir pour absorber l'espace libre disponible dans le conteneur flexible ou rétrécir à sa taille minimale pour rentrer dans le conteneur. Cette valeur est équivalente à "<code>flex: 1 1 auto</code>".</dd> + <dt><code>initial</code></dt> + <dd>L'élément est dimensionné selon ses propriétés <code>width</code> et <code>height</code>. Ce comportement est équivalent à la valeur par défaut (<code>0 1 auto</code>). Si besoin, l'élément rétrécit à sa taille minimale pour rentrer dans le conteneur mais il ne grandira pas s'il y a de l'espace disponible dans ce conteneur. Ce mot-clé est équivalent à "<code>flex: 0 1 auto</code>".</dd> + <dt><code>none</code></dt> + <dd>L'élément est dimensionné par rapport à ses propriétés <code>width</code> et <code>height</code>. Il n'est pas flexible : il ne peut ni rétrécir ni grandir selon l'espace du conteneur flexible. Ce mot-clé est équivalent à "<code>flex: 0 0 auto</code>".</dd> +</dl> +</div> + +<dl> + <dt><a id="grow" name="grow"><code><'flex-grow'></code></a></dt> + <dd>Voir {{cssxref("flex-grow")}}. Les valeurs négatives sont interdites et la valeur par défaut est <code>1</code>.</dd> + <dt><a id="shrink" name="shrink"><code><'flex-shrink'></code></a></dt> + <dd>Voir {{cssxref("flex-shrink")}}. Les valeurs négatives sont interdites et la valeur par défaut est <code>1</code>.</dd> + <dt><a id="basis" name="basis"><code><'flex-basis'></code></a></dt> + <dd>Voir {{cssxref("flex-basis")}}. Une valeur valide pour {{cssxref("width")}} et {{cssxref("height")}}. La valeur par défaut est <code>0</code>.</dd> +</dl> + +<div class="note"><strong>Note :</strong> Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, <code>flex-basis</code> vaudra 0. Pour plus d'informations, voir <a href="https://drafts.csswg.org/css-flexbox/#flex-common">le brouillon de spécification du module des boîtes flexibles</a>.</div> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#flex-container { + display: flex; + flex-direction: row; +} + +#flex-container > .flex-item { + flex: auto; +} + +#flex-container > .raw-item { + width: 5rem; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="flex-container"> + <div class="flex-item" id="flex">Boîte flexible (cliquer pour passer à la boîte « normale »)</div> + <div class="raw-item" id="raw">Boîte « normale » </div> +</div> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">var flex = document.getElementById("flex"); +var raw = document.getElementById("raw"); +flex.addEventListener("click", function() { + raw.style.display = raw.style.display == "none" ? "block" : "none"; +}); +</pre> + +<pre class="brush: css notranslate">#flex-container { + width: 100%; + font-family: Consolas, Arial, sans-serif; +} + +#flex-container > div { + border: 1px solid #f00; + padding: 1rem; +} + +#flex-container > .raw-item { + border: 1px solid #000; +} +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemples','100%','60')}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Spécification</th> + <th>État</th> + <th>Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<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> + +<p>{{Compat("css.properties.flex")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li> +</ul> |