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/flex-shrink/index.md | 100 +++++++++++++++------------------- 1 file changed, 43 insertions(+), 57 deletions(-) (limited to 'files/fr/web/css/flex-shrink') diff --git a/files/fr/web/css/flex-shrink/index.md b/files/fr/web/css/flex-shrink/index.md index c3c04c7657..2032bf417f 100644 --- a/files/fr/web/css/flex-shrink/index.md +++ b/files/fr/web/css/flex-shrink/index.md @@ -7,20 +7,21 @@ tags: - Reference translation_of: Web/CSS/flex-shrink --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété flex-shrink définit le facteur de rétrécissement d'un élément flexible. Si la taille de l'ensemble des éléments flexibles est supérieure à la taille du conteneur, les éléments seront comprimés selon leur facteur flex-shrink.

+La propriété **`flex-shrink`** définit le facteur de rétrécissement d'un élément flexible. Si la taille de l'ensemble des éléments flexibles est supérieure à la taille du conteneur, les éléments seront comprimés selon leur facteur `flex-shrink`. -

flex-shrink est généralement utilisé avec les propriétés {{cssxref("flex-grow")}} et {{cssxref("flex-basis")}}. Elle est souvent définie grâce à la propriété raccourcie {{cssxref("flex")}}.

+`flex-shrink` est généralement utilisé avec les propriétés {{cssxref("flex-grow")}} et {{cssxref("flex-basis")}}. Elle est souvent définie grâce à la propriété raccourcie {{cssxref("flex")}}. -
{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}
+{{EmbedInteractiveExample("pages/css/flex-shrink.html")}} -

Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.

+Pour plus d'informations, voir la page [Utiliser les boîtes flexibles (_flexbox_) CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS). -

Syntaxe

+## Syntaxe -
/* Valeurs numériques */
-/* Type <number>      */
+```css
+/* Valeurs numériques */
+/* Type       */
 flex-shrink: 2;
 flex-shrink: 0.6;
 
@@ -28,38 +29,38 @@ flex-shrink: 0.6;
 flex-shrink: inherit;
 flex-shrink: initial;
 flex-shrink: unset;
-
+``` -

La propriété flex-shrink est définie grâce à une valeur de type <number>.

+La propriété `flex-shrink` est définie grâce à une valeur de type [``](#number). -

Valeurs

+### Valeurs -
-
<number>
-
Un nombre (type {{cssxref("<number>")}}) qui correspond au facteur de rétrécissement utilisé. Plus la valeur est élevée, plus l'élément sera compressé si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est 1.
-
+- `` + - : Un nombre (type {{cssxref("<number>")}}) qui correspond au facteur de rétrécissement utilisé. Plus la valeur est élevée, plus l'élément sera compressé si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est `1`. -

Syntaxe formelle

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

Exemples

+## Exemples -

HTML

+### HTML -
<p>A,B,C ont flex-shrink: 1. D et E ont flex-shrink: 2.</p>
-<div id="content">
-  <div class="box" style="background-color:red;">A</div>
-  <div class="box" style="background-color:lightblue;">B</div>
-  <div class="box" style="background-color:yellow;">C</div>
-  <div class="box1" style="background-color:brown;">D</div>
-  <div class="box1" style="background-color:lightgreen;">E</div>
-</div>
-
+```html +

A,B,C ont flex-shrink: 1. D et E ont flex-shrink: 2.

+
+
A
+
B
+
C
+
D
+
E
+
+``` -

CSS

+### CSS -
#content {
+```css
+#content {
   display: flex;
   width: 500px;
 }
@@ -76,40 +77,25 @@ flex-shrink: unset;
 .box1 {
   flex-shrink: 2;
 }
-
+``` -

Résultat

+### Résultat -

{{EmbedLiveSample('Exemples', 500, 300)}}

+{{EmbedLiveSample('Exemples', 500, 300)}} -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
+| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}} | {{Spec2('CSS3 Flexbox')}} | Définition initiale. | -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.properties.flex-shrink")}}

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

Voir aussi

+## Voir aussi - +- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)_ +- Guide sur les boîtes flexibles : _[Contrôler les proportions des boîtes flexibles le long de l'axe principal](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal)_ -- cgit v1.2.3-54-g00ecf