aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/flex-wrap/index.md
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/css/flex-wrap/index.md')
-rw-r--r--files/fr/web/css/flex-wrap/index.md43
1 files changed, 20 insertions, 23 deletions
diff --git a/files/fr/web/css/flex-wrap/index.md b/files/fr/web/css/flex-wrap/index.md
index 606e97356d..c5453671f5 100644
--- a/files/fr/web/css/flex-wrap/index.md
+++ b/files/fr/web/css/flex-wrap/index.md
@@ -1,10 +1,6 @@
---
title: flex-wrap
slug: Web/CSS/flex-wrap
-tags:
- - CSS
- - Propriété
- - Reference
translation_of: Web/CSS/flex-wrap
---
{{CSSRef}}
@@ -36,7 +32,7 @@ La propriété `flex-wrap` peut être défini grâce à l'un des mots-clés suiv
- `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**.
+ - : 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.
@@ -77,52 +73,53 @@ La propriété `flex-wrap` peut être défini grâce à l'un des mots-clés suiv
.contenu,
.contenu1,
.contenu2 {
- color: #fff;
- font: 100 24px/100px sans-serif;
- height: 150px;
- text-align: center;
+ color: #fff;
+ font: 100 24px/100px sans-serif;
+ height: 150px;
+ width: 897px;
+ text-align: center;
}
.contenu div,
.contenu1 div,
.contenu2 div {
- height: 50%;
- width: 300px;
+ height: 50%;
+ width: 300px;
}
.rouge {
- background: orangered;
+ background: orangered;
}
.vert {
- background: yellowgreen;
+ background: yellowgreen;
}
.bleu {
- background: steelblue;
+ background: steelblue;
}
/* Styles pour les boîtes flexibles*/
.contenu {
- display: flex;
- flex-wrap: wrap;
+ display: flex;
+ flex-wrap: wrap;
}
.contenu1 {
- display: flex;
- flex-wrap: nowrap;
+ display: flex;
+ flex-wrap: nowrap;
}
.contenu2 {
- display: flex;
- flex-wrap: wrap-reverse;
+ display: flex;
+ flex-wrap: wrap-reverse;
}
```
### Résultat
-{{EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap')}}
+{{EmbedLiveSample('Exemples', '700px', '700px')}}
## Spécifications
-| Spécification | État | Commentaires |
+| Spécification | État | Commentaires |
| ------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
-| {{SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap')}} | {{Spec2('CSS3 Flexbox')}} |   |
+| {{SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap')}} | {{Spec2('CSS3 Flexbox')}} | |
{{cssinfo}}