From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/flex/index.md | 290 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 290 insertions(+) create mode 100644 files/fr/web/css/flex/index.md (limited to 'files/fr/web/css/flex/index.md') diff --git a/files/fr/web/css/flex/index.md b/files/fr/web/css/flex/index.md new file mode 100644 index 0000000000..2214dc0f6f --- /dev/null +++ b/files/fr/web/css/flex/index.md @@ -0,0 +1,290 @@ +--- +title: flex +slug: Web/CSS/flex +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

La propriété flex 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.

+ +

Les propriétés détaillées correspondantes à cette propriété raccourcie sont {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}.

+ +

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.

+ +
{{EmbedInteractiveExample("pages/css/flex.html")}}
+ +

Description

+ +

Pour la plupart des cas, on utilisera une des valeurs suivantes : auto, initial, none ou un nombre positif sans unité. Pour voir l'effet de ces valeurs, essayez de redimensionner les conteneurs flexibles ci-après :

+ + + + + +

{{EmbedLiveSample("description", "100%","370")}}

+ +

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")}}.

+ +

Voir la page Utiliser les boîtes flexibles (flexbox) CSS pour plus d'informations.

+ +

Syntaxe

+ +
/* 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;
+
+ +

La propriété flex peut être définie avec une, deux ou trois valeurs.

+ + + +

Valeurs

+ +
+
auto
+
L'élément est dimensionné selon ses propriétés width et height 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 à "flex: 1 1 auto".
+
initial
+
L'élément est dimensionné selon ses propriétés width et height. Ce comportement est équivalent à la valeur par défaut (0 1 auto). 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 à "flex: 0 1 auto".
+
none
+
L'élément est dimensionné par rapport à ses propriétés width et height. 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 à "flex: 0 0 auto".
+
<'flex-grow'>
+
Voir {{cssxref("flex-grow")}}. Les valeurs négatives sont interdites et la valeur par défaut est 1.
+
<'flex-shrink'>
+
Voir {{cssxref("flex-shrink")}}. Les valeurs négatives sont interdites et la valeur par défaut est 1.
+
<'flex-basis'>
+
Voir {{cssxref("flex-basis")}}. Une valeur valide pour {{cssxref("width")}} et {{cssxref("height")}}. La valeur par défaut est 0.
+
+ +
+

Note : Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, flex-basis vaudra 0. Pour plus d'informations, voir le brouillon de spécification du module des boîtes flexibles.

+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
#flex-container {
+	display: flex;
+	flex-direction: row;
+}
+
+#flex-container > .flex-item {
+	flex: auto;
+}
+
+#flex-container > .raw-item {
+	width: 5rem;
+}
+
+ +

HTML

+ +
<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>
+
+ +

JavaScript

+ +
var flex = document.getElementById("flex");
+var raw = document.getElementById("raw");
+flex.addEventListener("click", function() {
+	raw.style.display = raw.style.display == "none" ? "block" : "none";
+});
+
+ +
#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;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','100%','60')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

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