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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
---
title: order
slug: Web/CSS/order
translation_of: Web/CSS/order
---
<div>{{CSSRef}}</div>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>order</code></strong> especifica el orden utilizado para disponer los elementos en su contenedor flexible. Los elementos estarán dispuestos en orden ascendente según el valor de <code>order</code>. Los elementos con el mismo valor de <code>order</code> se dispondrán en el orden en el cual aparecen en el código fuente.</p>
<div class="note">
<p><strong>Nota</strong>: <code>order</code> sólo pretende afectar el orden visual de los elementos y no su orden lógico u orden de tabulación. <code><strong>order</strong></code> no se debe usar en un medio no visual tal como un speech (sintetizador de voz).</p>
</div>
<p>{{cssinfo}}</p>
<p>Ver <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Uso de cajas flexibles de CSS</a> para más propiedades e información.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush:css">/* Valor numérico incluyendo números negativos */
order: 5;
order: -5;
/* Valores Globales */
order: inherit;
order: initial;
order: unset;
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code><integer></code></dt>
<dd>Representa el grupo ordinal al que el elemento flexible ha sido asignado.</dd>
</dl>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
{{csssyntax}}
<h2 id="Ejemplos">Ejemplos</h2>
<p>Aquí tiene un trozo de HTML básico:</p>
<pre class="brush:html;"><!DOCTYPE html>
<header>...</header>
<div id='main'>
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>...</footer></pre>
<p>El siguiente código CSS debería crear un diseño clásico de dos barra laterales que rodea a un bloque de contenido. EL Módulo de Diseño de Caja Flexible crea automáticamente bloques de tamaño vertical igual y utiliza todo el espacio horizontal disponible.</p>
<p><span style='background-color: #fafbfc; font-family: Consolas,Monaco,"Andale Mono",monospace; font-size: 1rem; line-height: 19px; white-space: pre;'>#main { display: flex; text-align:center; }</span></p>
<pre class="brush:css;">#main > article { flex:1; order: 2; }
#main > nav { width: 200px; order: 1; }
#main > aside { width: 200px; order: 3; }</pre>
<h3 id="Resultado">Resultado</h3>
<p>{{ EmbedLiveSample('Examples' ,'','','','Web/CSS/order') }}</p>
<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2>
<p>Utilizar la propiedad <code>order</code> rompe la conexión entre la presentación visual y el order original de los elementos en el DOM. Esto afecta de forma negativa a los usuarios que navegan a través de teclado utilizando, por ejemplo, un lector de pantalla. Si el orden visual (CSS) es importante, entonces los lectores de pantallas no podrán acceder a ese dato y recorrerán los elementos de forma desordenada.</p>
<p>Para más información por favor, referirse a estos artículos:</p>
<ul>
<li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox & the keyboard navigation disconnect — Tink</a></li>
<li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">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 href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Definición Inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}<br>
29</td>
<td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
{{CompatGeckoDesktop("20.0")}}<sup>[2]</sup></td>
<td>
<p>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br>
11</p>
</td>
<td>12.10</td>
<td>7 {{property_prefix("-webkit")}}<br>
9</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("18.0")}}<sup>[1]</sup><br>
{{CompatGeckoMobile("20.0")}}<sup>[2]</sup></td>
<td>{{CompatUnknown}}</td>
<td>12.10</td>
<td>7 {{property_prefix("-webkit")}}<br>
9</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Para activar el soporte Flexbox en Firefox 18 and 19, el usuario debe cambiar en preferencias about:config <code>layout.css.flexbox.enabled</code> a <code>true</code>. Las cajas flexibles multi-línea son soportadas desde Firefox 28.</p>
<p>Actualmente Firefox cambia incorrectamente el orden de tabulación de los elementos. Ver {{bug("812687")}}.</p>
<p>[2] Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añade soporte para un prefijo <code>-webkit</code> en versión porpietaria por razones compatibilidad web bajo la preferencia <code>layout.css.prefixes.webkit</code>, por defecto en <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} la preferencia por defecto está en <code>true</code>.</p>
<p>[3] En Internet Explorer 10, un contenedor flexible se declara usando <code>display:-ms-flexbox</code> y no <code>display:flex</code>. La propiedad está implementada bajo el monbre no-estándar <code>-ms-flex-order</code>.</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Uso de cajas flexibles de CSS</a></li>
</ul>
|
