1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: flex-direction
slug: Web/CSS/flex-direction
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/flex-direction
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>flex-direction</code></strong> 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).</p>
<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div>
<p>On notera que les valeurs <code>row</code> et <code>row-reverse</code> sont impactées par la direction du conteneur. Si {{htmlattrxref("dir")}} vaut <code>ltr</code>, <code>row</code> représente l'axe horizontal allant de la gauche vers la droite et <code>row-reverse</code> représente le même axe allant de la droite vers la gauche. Si <code>dir</code> vaut <code>rtl</code>, <code>row</code> correspondra à l'axe horizontal orienté de la droite vers la gauche et <code>row-reverse</code> de la gauche vers la droite.</p>
<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>row</code></dt>
<dd>L'axe principal du conteneur flexible suit la direction du texte. Les points <strong>main-start</strong> et <strong>main-end</strong> vont dans la même direction que le contenu.</dd>
<dt><code>row-reverse</code></dt>
<dd>L'axe principal du conteneur flexible suit la direction du texte. Les points <strong>main-start</strong> et <strong>main-end</strong> vont dans la direction opposée au contenu.</dd>
<dt><code>column</code></dt>
<dd>L'axe principal du conteneur flexible suit l'axe de bloc (perpendiculaire à la direction du texte). Les points <strong>main-start</strong> et <strong>main-end</strong> correspondent aux points <strong>before</strong> et <strong>after</strong> de {{cssxref("writing-mode")}}.</dd>
<dt><code>column-reverse</code></dt>
<dd>Se comporte comme <code>column</code> mais <strong>main-start</strong> et <strong>main-end</strong> sont échangés.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples', '', '300')}}</p>
<h2 id="Accessibilité">Accessibilité</h2>
<p>Lorsqu'on utilise <code>flex-direction</code> avec les valeurs <code>row-reverse</code> ou <code>column-reverse</code>, 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.</p>
<ul>
<li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Les boîtes flexibles et la déconnexion par rapport à la navigation au clavier, Tink (en anglais)</a></li>
<li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">L'importance de l'ordre de la source, Adrian Roselli (en anglais)</a></li>
<li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles 1.3 du WCAG</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Comprendre les critères de réussite 1.3.2 WCAG 2.0, W3C (en anglais)</a></li>
</ul>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th>Spécification</th>
<th>État</th>
<th>Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.flex-direction")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>Guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Concepts de base</a></em></li>
<li>Guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li>
</ul>
|
