diff options
Diffstat (limited to 'files/fr/web/css/flex-wrap/index.md')
-rw-r--r-- | files/fr/web/css/flex-wrap/index.md | 43 |
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}} |