initial commit

1 files changed, 158 insertions, 0 deletions

diff --git a/files/es/web/css/flex-direction/index.html b/files/es/web/css/flex-direction/index.html
new file mode 100644
index 0000000000..82726b33b6
--- /dev/null
+++ b/files/es/web/css/flex-direction/index.html
@@ -0,0 +1,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 &lt;row&gt;, 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 &lt;column&gt;, 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">&lt;</span>h4</span><span class="punctuation token">&gt;</span></span>Esto es un Column-Reverse<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h4</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</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">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</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">&gt;</span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</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">&gt;</span></span>B<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</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">&gt;</span></span>C<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h4</span><span class="punctuation token">&gt;</span></span>Esto es un Row-Reverse<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h4</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</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">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</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">&gt;</span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</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">&gt;</span></span>B<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</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">&gt;</span></span>C<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</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 &amp; 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>