From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/flex-direction/index.html | 158 +++++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 files/es/web/css/flex-direction/index.html (limited to 'files/es/web/css/flex-direction') 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 +--- +

{{CSSRef}}

+ +

La propiedad CSS flex-direction especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección (normal o al revés).

+ +

{{EmbedInteractiveExample("pages/css/flex-direction.html")}}

+ +

Tenga en cuenta que el valor de row y  row-reverse se verán afectados por la direccionalidad del contenedor flexible. Si su atributo dir es ltr, row representa el eje horizontal orientado de  izquierda a derecha, y row-reverse desde la derecha hacia la izquierda; si el atributo dir es rtl, row representa el eje orientado de derecha a izquierda, y  row-reverse de izquierda a derecha.

+ +

Sintaxis

+ +
/* La dirección del texto se presenta en una línea */
+flex-direction: row;
+
+/* Como <row>, pero al revés */
+flex-direction: row-reverse;
+
+/* La dirección en la que se apilas las líneas de texto */
+flex-direction: column;
+
+/* Como <column>, pero al revés */
+flex-direction: column-reverse;
+
+/* Valores globales */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+ +

Valores

+ +

Se aceptan los siguientes valores:

+ +
+
row
+
El eje principal del contenedor flexible está definido para ser el mismo que la dirección del texto. Los puntos principales de inicio y final son los mismos que la dirección del contenido.
+
row-reverse
+
+

Se comporta igual que row pero los puntos principales de inicio y final son intercambiados.

+
+
column
+
El eje principal del contenedor flexible es el mismo que el eje del bloque. Los puntos principales de inicio y final son los mismos que los puntos de antes y después del modo escritura.
+
column-reverse
+
Se comporta igual que column pero los puntos principales de inicio y final son intercambiados.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<h4>Esto es un 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>Esto es un Row-Reverse</h4>
+<div id="content1">
+    <div class="box1" style="background-color:red;">A</div>
+    <div class="box1" style="background-color:lightblue;">B</div>
+    <div class="box1" style="background-color:yellow;">C</div>
+</div>
+ +

CSS

+ +
#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: column-reverse;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: row-reverse;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box1 {
+  width: 50px;
+  height: 50px;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '300', '', 'Web/CSS/flex-direction') }}

+ +

Sobre Accesibilidad

+ +

Si utilizas flex-direction con un valor de row-reverse o column-reverse 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):

+ + + +

Specificaciones

+ + + + + + + + + + + + + + + + + + +
EspecificaciónEstado +

Comentario

+
{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }}{{ Spec2('CSS3 Flexbox') }}Definición inicial
+ +

{{cssinfo}}

+ +

Compatibilidad de Navegadores

+ +

{{Compat("css.properties.flex-direction")}}

+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf