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/order/index.html | 172 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 files/es/web/css/order/index.html (limited to 'files/es/web/css/order') 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 +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS order 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 order. Los elementos con el mismo valor de order se dispondrán en el orden en el cual aparecen en el código fuente.

+ +
+

Nota: order sólo pretende afectar el orden visual de los elementos y no su orden lógico u orden de tabulación. order no se debe usar en un medio no visual tal como un speech (sintetizador de voz).

+
+ +

{{cssinfo}}

+ +

Ver Uso de cajas flexibles de CSS para más propiedades e información.

+ +

Sintaxis

+ +
/* Valor numérico incluyendo números negativos */
+order: 5;
+order: -5;
+
+/* Valores Globales */
+order: inherit;
+order: initial;
+order: unset;
+
+ +

Valores

+ +
+
<integer>
+
Representa el grupo ordinal al que el elemento flexible ha sido asignado.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Aquí tiene un trozo de HTML básico:

+ +
<!DOCTYPE html>
+<header>...</header>
+<div id='main'>
+   <article>Article</article>
+   <nav>Nav</nav>
+   <aside>Aside</aside>
+</div>
+<footer>...</footer>
+ +

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.

+ +

#main { display: flex;  text-align:center; }

+ +
#main > article { flex:1;        order: 2; }
+#main > nav     { width: 200px;  order: 1; }
+#main > aside   { width: 200px;  order: 3; }
+ +

Resultado

+ +

{{ EmbedLiveSample('Examples' ,'','','','Web/CSS/order') }}

+ +

Sobre Accesibilidad

+ +

Utilizar la propiedad order 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.

+ +

Para más información por favor, referirse a estos artículos:

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}{{Spec2('CSS3 Flexbox')}}Definición Inicial
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}
+ 29		{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("20.0")}}[2]		 +

10.0{{property_prefix("-ms")}}[3]
+ 11

+ 		12.107 {{property_prefix("-webkit")}}
+ 9
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("18.0")}}[1]
+ {{CompatGeckoMobile("20.0")}}[2]		{{CompatUnknown}}12.107 {{property_prefix("-webkit")}}
+ 9
+
+ +

[1] Para activar el soporte Flexbox en  Firefox 18 and 19, el usuario debe cambiar en preferencias about:config layout.css.flexbox.enabled a true. Las cajas flexibles multi-línea son soportadas desde Firefox 28.

+ +

Actualmente Firefox cambia incorrectamente el orden de tabulación de los elementos. Ver {{bug("812687")}}.

+ +

[2] Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añade soporte para un prefijo -webkit en versión porpietaria por razones compatibilidad web bajo la preferencia layout.css.prefixes.webkit, por defecto en false. Desde Gecko 49.0 {{geckoRelease("49.0")}} la preferencia por defecto está en true.

+ +

[3] En Internet Explorer 10, un contenedor flexible se declara usando display:-ms-flexbox y no display:flex. La propiedad está implementada bajo el monbre no-estándar -ms-flex-order.

+ +

Ver también

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