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

La propriété flex-direction définit la façon dont les éléments flexibles sont placés dans un conteneur flexible : elle définit l'axe principal et la direction des éléments (normale ou inversée).

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

On notera que les valeurs row et row-reverse sont impactées par la direction du conteneur. Si {{htmlattrxref("dir")}} vaut ltr, row représente l'axe horizontal allant de la gauche vers la droite et row-reverse représente le même axe allant de la droite vers la gauche. Si dir vaut rtl, row correspondra à l'axe horizontal orienté de la droite vers la gauche et row-reverse de la gauche vers la droite.

- -

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

- -

Syntaxe

- -
/* La direction suit une ligne */
-flex-direction: row;
-
-/* Semblable à <row> mais dans */
-/* la direction opposée        */
-flex-direction: row-reverse;
-
-/* Les lignes de texte sont */
-/* empilées                 */
-flex-direction: column;
-
-/* Semblable à <column> mais dans */
-/* la direction opposée           */
-flex-direction: column-reverse;
-
-/* Valeurs globales */
-flex-direction: inherit;
-flex-direction: initial;
-flex-direction: unset;
-
- -

Valeurs

- -
-
row
-
L'axe principal du conteneur flexible suit la direction du texte. Les points main-start et main-end vont dans la même direction que le contenu.
-
row-reverse
-
L'axe principal du conteneur flexible suit la direction du texte. Les points main-start et main-end vont dans la direction opposée au contenu.
-
column
-
L'axe principal du conteneur flexible suit l'axe de bloc (perpendiculaire à la direction du texte). Les points main-start et main-end correspondent aux points before et after de {{cssxref("writing-mode")}}.
-
column-reverse
-
Se comporte comme column mais main-start et main-end sont échangés.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<h4>Un exemple avec column-reverse</h4>
-<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>
-<h4>Un exemple avec row-reverse</h4>
-<div id="content1">
-    <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>
-
- -

CSS

- -
#content {
-  width: 200px;
-  height: 200px;
-  border: 1px solid #c3c3c3;
-  display: flex;
-  flex-direction: column-reverse;
-}
-
-#content1 {
-  width: 200px;
-  height: 200px;
-  border: 1px solid #c3c3c3;
-  display: flex;
-  flex-direction: row-reverse;
-}
-
-.box {
-  width: 50px;
-  height: 50px;
-}
- -

Résultat

- -

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

- -

Accessibilité

- -

Lorsqu'on utilise flex-direction avec les valeurs row-reverse ou column-reverse, on crée une déconnexion entre la présentation visuelle du contenu et l'ordre du DOM. Cela aura un impact négatif pour les utilisateurs qui naviguent à l'aide d'outils d'assistance tels que les les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct pour la lecture.

- - - -

Spécifications

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

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/css/flex-direction/index.md b/files/fr/web/css/flex-direction/index.md new file mode 100644 index 0000000000..68b9b2d921 --- /dev/null +++ b/files/fr/web/css/flex-direction/index.md @@ -0,0 +1,146 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/flex-direction +--- +
{{CSSRef}}
+ +

La propriété flex-direction définit la façon dont les éléments flexibles sont placés dans un conteneur flexible : elle définit l'axe principal et la direction des éléments (normale ou inversée).

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

On notera que les valeurs row et row-reverse sont impactées par la direction du conteneur. Si {{htmlattrxref("dir")}} vaut ltr, row représente l'axe horizontal allant de la gauche vers la droite et row-reverse représente le même axe allant de la droite vers la gauche. Si dir vaut rtl, row correspondra à l'axe horizontal orienté de la droite vers la gauche et row-reverse de la gauche vers la droite.

+ +

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

+ +

Syntaxe

+ +
/* La direction suit une ligne */
+flex-direction: row;
+
+/* Semblable à <row> mais dans */
+/* la direction opposée        */
+flex-direction: row-reverse;
+
+/* Les lignes de texte sont */
+/* empilées                 */
+flex-direction: column;
+
+/* Semblable à <column> mais dans */
+/* la direction opposée           */
+flex-direction: column-reverse;
+
+/* Valeurs globales */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+
+ +

Valeurs

+ +
+
row
+
L'axe principal du conteneur flexible suit la direction du texte. Les points main-start et main-end vont dans la même direction que le contenu.
+
row-reverse
+
L'axe principal du conteneur flexible suit la direction du texte. Les points main-start et main-end vont dans la direction opposée au contenu.
+
column
+
L'axe principal du conteneur flexible suit l'axe de bloc (perpendiculaire à la direction du texte). Les points main-start et main-end correspondent aux points before et after de {{cssxref("writing-mode")}}.
+
column-reverse
+
Se comporte comme column mais main-start et main-end sont échangés.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<h4>Un exemple avec column-reverse</h4>
+<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>
+<h4>Un exemple avec row-reverse</h4>
+<div id="content1">
+    <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>
+
+ +

CSS

+ +
#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}
+ +

Résultat

+ +

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

+ +

Accessibilité

+ +

Lorsqu'on utilise flex-direction avec les valeurs row-reverse ou column-reverse, on crée une déconnexion entre la présentation visuelle du contenu et l'ordre du DOM. Cela aura un impact négatif pour les utilisateurs qui naviguent à l'aide d'outils d'assistance tels que les les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct pour la lecture.

+ + + +

Spécifications

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

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

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