initial commit

1 files changed, 172 insertions, 0 deletions

diff --git a/files/es/web/css/order/index.html b/files/es/web/css/order/index.html
new file mode 100644
index 0000000000..fa8484670f
--- /dev/null
+++ b/files/es/web/css/order/index.html
@@ -0,0 +1,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>&lt;integer&gt;</code></dt>
+ <dd>Representa el grupo ordinal al que el elemento flexible ha sido asignado.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Aquí tiene un trozo de HTML básico:</p>
+
+<pre class="brush:html;">&lt;!DOCTYPE html&gt;
+&lt;header&gt;...&lt;/header&gt;
+&lt;div id='main'&gt;
+   &lt;article&gt;Article&lt;/article&gt;
+   &lt;nav&gt;Nav&lt;/nav&gt;
+   &lt;aside&gt;Aside&lt;/aside&gt;
+&lt;/div&gt;
+&lt;footer&gt;...&lt;/footer&gt;</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 &gt; article { flex:1;        order: 2; }
+#main &gt; nav     { width: 200px;  order: 1; }
+#main &gt; 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 &amp; 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>