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
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: flex-direction
slug: Web/CSS/flex-direction
tags:
- CCS
- Cajas Flexibles CSS
- Propiedad CSS
- Referencia
- flexbox
translation_of: Web/CSS/flex-direction
---
<p>{{CSSRef}}</p>
<p><span lang="es"><span class="hps">La propiedad</span> <span class="hps">CSS</span> <code><strong><span class="atn hps">flex-</span><span>direction</span></strong></code><span> especifica</span> cómo colocar los objetos flexibles <span class="hps">en el contenedor</span> <span class="hps">flexible</span> <span class="hps">definiendo el eje</span> <span class="hps">principal y</span> <span class="hps">la dirección</span> <span class="atn hps">(</span><span>normal o al revés</span><span>)</span><span>.</span></span></p>
<p>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</p>
<p><span lang="es"><span class="hps">Tenga en cuenta que</span> <span class="hps">el</span> <span class="hps">valor de</span> <code>row </code><span class="hps">y <code>row-reverse</code></span> <span class="hps">se verán afectados por</span> <span class="hps">la direccionalidad</span> <span class="hps">del contenedor</span> <span class="hps">flexible.</span> <span class="hps">Si</span> <span class="hps">su atributo</span> <code>dir </code><span class="hps">es</span> <code>ltr</code>, <code>row</code><span class="hps"> representa</span> <span class="hps">el eje horizontal</span> <span class="hps">orientado</span> <span class="hps">de izquierda</span> <span class="hps">a derecha,</span> <span class="hps">y <code>row-reverse</code></span> <span class="hps">desde la derecha</span> <span class="hps">hacia la izquierda;</span> <span class="hps">si el atributo</span> <code>dir </code><span class="hps">es</span> <code>rtl</code>, <code>row </code><span class="hps">representa</span> <span class="hps">el</span> <span class="hps">eje orientado</span> <span class="hps">de derecha</span> <span class="hps">a izquierda</span><span>,</span> <span class="hps">y <code>row-reverse</code></span> <span class="hps">de izquierda a</span> <span class="hps">derecha.</span></span></p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush:css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* La dirección del texto se presenta en una línea */</span>
<span class="property token">flex-direction</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span>
<span class="comment token">/* Como <row>, pero al revés */</span>
<span class="property token">flex-direction</span><span class="punctuation token">:</span> row-reverse<span class="punctuation token">;</span>
<span class="comment token">/* La dirección en la que se apilas las líneas de texto */</span>
<span class="property token">flex-direction</span><span class="punctuation token">:</span> column<span class="punctuation token">;</span>
<span class="comment token">/* Como <column>, pero al revés */</span>
<span class="property token">flex-direction</span><span class="punctuation token">:</span> column-reverse<span class="punctuation token">;</span>
<span class="comment token">/* Valores globales */</span>
<span class="property token">flex-direction</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
<span class="property token">flex-direction</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
<span class="property token">flex-direction</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>
<h3 id="Valores">Valores</h3>
<p><span class="short_text" id="result_box" lang="es"><span class="hps">Se aceptan los siguientes</span> <span class="hps">valores:</span></span></p>
<dl>
<dt><code>row</code></dt>
<dd>El eje principal del contenedor flexible está definido para ser el mismo que la dirección del texto. Los <strong>puntos principales de inicio y final</strong> son los mismos que la dirección del contenido.</dd>
<dt><code>row-reverse</code></dt>
<dd>
<p>Se comporta igual que <code>row</code> pero los <strong>puntos principales de inicio</strong> y <strong>final</strong> son intercambiados.</p>
</dd>
<dt><code>column</code></dt>
<dd>El eje principal del contenedor flexible es el mismo que el eje del bloque. Los <strong>puntos principales de inicio y final</strong> son los mismos que los <strong>puntos de antes y después</strong> del modo escritura.</dd>
<dt><code>column-reverse</code></dt>
<dd>Se comporta igual que <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">column</span></font> pero los <strong>puntos principales de inicio</strong> y <strong>final</strong> son intercambiados.</dd>
</dl>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Ejemplo">Ejemplo</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h4</span><span class="punctuation token">></span></span>Esto es un Column-Reverse<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h4</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>content<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>red<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>lightblue<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>B<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>yellow<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>C<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h4</span><span class="punctuation token">></span></span>Esto es un Row-Reverse<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h4</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>content1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box1<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>red<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box1<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>lightblue<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>B<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box1<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>yellow<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>C<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="id token">#content</span> </span><span class="punctuation token">{</span>
<span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span>
<span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span>
<span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#c3c3c3</span><span class="punctuation token">;</span>
<span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span>
<span class="property token">-webkit-flex-direction</span><span class="punctuation token">:</span> column-reverse<span class="punctuation token">;</span>
<span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span>
<span class="property token">flex-direction</span><span class="punctuation token">:</span> column-reverse<span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="selector token"><span class="class token">.box</span> </span><span class="punctuation token">{</span>
<span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span>
<span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="selector token"><span class="id token">#content1</span> </span><span class="punctuation token">{</span>
<span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span>
<span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span>
<span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#c3c3c3</span><span class="punctuation token">;</span>
<span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span>
<span class="property token">-webkit-flex-direction</span><span class="punctuation token">:</span> row-reverse<span class="punctuation token">;</span>
<span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span>
<span class="property token">flex-direction</span><span class="punctuation token">:</span> row-reverse<span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="selector token"><span class="class token">.box1</span> </span><span class="punctuation token">{</span>
<span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span>
<span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>
<h3 id="Resultado">Resultado</h3>
<p>{{ EmbedLiveSample('Example', '', '300', '', 'Web/CSS/flex-direction') }}</p>
<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2>
<p>Si utilizas <code>flex-direction</code> con un valor de <code>row-reverse</code> o <code>column-reverse</code> en elementos que necesitan foco (como botones) el orden de visualización será distinto al orden el DOM, por lo que los usuarios de lectores de pantalla no verán reflejado el mismo orden de los elementos que un usuario vidente. Para más información (en inglés):</p>
<ul>
<li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox & the keyboard navigation disconnect — Tink</a></li>
<li><a class="external external-icon" href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
<li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="Specificaciones">Specificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th>Especificación</th>
<th>Estado</th>
<th>
<p>Comentario</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }}</td>
<td>{{ Spec2('CSS3 Flexbox') }}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
<p>{{Compat("css.properties.flex-direction")}}</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>Guía de CSS Flexbox: <em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Conceptos básicos de Flexbox</a></em></li>
<li>Guía de CSS Flexbox: <em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordenar items flex</a></em></li>
</ul>
|
