English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La propiedad order CSS especifica el orden de visualización y disposición de los elementos dentro del contenedor flexible. Los elementos se ordenan en orden ascendente según su valor de orden. Los elementos con valores de orden iguales se disponen en el orden en que aparecen en el código fuente.
La tabla a continuación proporciona una descripción del uso y el historial de versiones de este atributo, así como la sintaxis de uso en scripts de JavaScript.
| Valor predeterminado: | 0 |
|---|---|
| Aplique a: | Artículos Flex y contenedores FlexPosicionamiento absolutoDescendencia |
| Herencia: | No |
| Animable: | es.Por favor, consulte Atributos de animación。 |
| Versión: | CSS3nueva característica |
| Sintaxis de JavaScript: | object.style.order="2" |
La sintaxis de este atributo es la siguiente:
order: entero | inicial | inherit
El siguiente ejemplo muestra cómo usar el atributo order.
.flex-container {
border: 2px sólido #000;
display: -webkit-flex; /* Safari 6.1+ */
display: flex;
}
.item1 {
width: 100px;
background: #ff80c0;
-webkit-order: 2; /* Safari 6.1+ */
order: 2;
}
.item2 {
width: 100px;
background: #8080ff;
-webkit-order: 1; /* Safari 6.1+ */
order: 1;
}
.item3 {
width: 100px;
background:#0080ff;
}Ver el‹/›La tabla a continuación describe los valores de este atributo.
| Valor | Descripción |
|---|---|
| integer | Especificar el orden del elemento flexible. El valor predeterminado es 0. |
| initial | Establecer este atributo en su valor predeterminado. |
| inherit | Si se especifica, el elemento asociado utiliza el valor del atributo order del elemento padre. |
La compatibilidad del navegador del atributo order, los números en la tabla a continuación indican la versión mínima de los navegadores que admiten este atributo; todos los navegadores principales admiten este atributo.
|
Por favor, consulte la siguiente instrucción:Fuentes de CSS，Unidades de CSS，Elementos pseudo de CSS。
Propiedades relacionadas: align-content, align-items, align-self, display, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order.