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/flex-wrap/index.html | 158 ++++++++++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 files/fr/web/css/flex-wrap/index.html (limited to 'files/fr/web/css/flex-wrap') diff --git a/files/fr/web/css/flex-wrap/index.html b/files/fr/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..306131015b --- /dev/null +++ b/files/fr/web/css/flex-wrap/index.html @@ -0,0 +1,158 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/flex-wrap +--- +
{{CSSRef}}
+ +

La propriété flex-wrap indique si les éléments flexibles sont contraints à être disposés sur une seule ligne ou s'ils peuvent être affichés sur plusieurs lignes avec un retour automatique. Si le retour à la ligne est autorisé, la propriété permet également de contrôler la direction dans laquelle les lignes sont empilées.

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

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

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+flex-wrap: nowrap; /* Valeur par défaut */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Valeurs globales */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+
+ +

La propriété flex-wrap peut être défini grâce à l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
nowrap
+
Les éléments flexibles sont disposés sur une seule ligne. Cela peut entraîner un dépassement du conteneur. La ligne cross-start est équivalente à start ou à before selon la valeur de {{cssxref("flex-direction")}}. Cette valeur est la valeur par défaut.
+
wrap
+
Les éléments flexibles sont disposé sur plusieurs lignes. La ligne cross-start est équivalente à  start ou before en fonction de la valeur de flex-direction et la ligne cross-end est à l'opposée cross-start.
+
wrap-reverse
+
Se comporte comme wrap mais cross-start et cross-end sont permutées.
+
+

Syntaxe formelle

+
+
+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
+
<h4>Un exemple de flex-wrap:wrap </h4>
+<div class="contenu">
+  <div class="rouge">1</div>
+  <div class="vert">2</div>
+  <div class="bleu">3</div>
+</div>
+
+<h4>Un exemple de flex-wrap:nowrap </h4>
+<div class="contenu1">
+  <div class="rouge">1</div>
+  <div class="vert">2</div>
+  <div class="bleu">3</div>
+</div>
+
+<h4>Un exemple de flex-wrap:wrap-reverse </h4>
+<div class="contenu2">
+  <div class="rouge">1</div>
+  <div class="vert">2</div>
+  <div class="bleu">3</div>
+</div>
+
+ +

CSS

+ +
.contenu,
+.contenu1,
+.contenu2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.contenu div,
+.contenu1 div,
+.contenu2 div {
+    height: 50%;
+    width: 300px;
+}
+.rouge {
+    background: orangered;
+}
+.vert {
+    background: yellowgreen;
+}
+.bleu {
+    background: steelblue;
+}
+
+/* Styles pour les boîtes flexibles*/
+.contenu {
+    display: flex;
+    flex-wrap: wrap;
+}
+.contenu1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.contenu2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+
+
+ +

Résultat

+ +

{{EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap')}}

+ +

Spécifications

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

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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