Propiedad order
La propiedad order establece el orden de
un bloque flex individual dentro del
contenedor flex. Se aplica a un bloque flex específico.
La propiedad acepta como valor un número entero positivo o negativo. Cuanto menor sea el número, más temprano se ubicará el elemento, independientemente de su posición en el código HTML relativa a otros elementos.
Sintaxis
selector {
order: número positivo o negativo;
}
Ejemplo
En este ejemplo, a todos los bloques se les ha establecido un orden
de disposición mediante order. El primer bloque
será el que tenga un order negativo -1,
luego el con order 1 y así sucesivamente en orden ascendente:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
<div id="elem6">6</div>
</div>
#parent {
display: flex;
align-items: flex-start;
flex-direction: row;
}
#parent > div {
border: 1px solid #696989;
min-width: 100px;
}
#elem1 {
order: 4;
}
#elem2 {
order: 5;
}
#elem3 {
order: 3;
}
#elem4 {
order: 2;
}
#elem5 {
order: 1;
}
#elem6 {
order: -1;
}
:
Véase también
-
propiedad
flex-direction,
que establece la dirección de los ejes de los bloques flex -
propiedad
justify-content,
que establece la alineación a lo largo del eje principal -
propiedad
align-items,
que establece la alineación a lo largo del eje transversal -
propiedad
flex-wrap,
que establece el ajuste de línea múltiple de los bloques flex -
propiedad
flex-flow,
abreviatura para flex-direction y flex-wrap -
propiedad
align-self,
que establece la alineación de un solo bloque -
propiedad
flex-basis,
que establece el tamaño de un bloque flex específico -
propiedad
flex-grow,
que establece la capacidad de expansión de los bloques flex -
propiedad
flex-shrink,
que establece la capacidad de contracción de los bloques flex -
propiedad
flex,
abreviatura para flex-grow, flex-shrink y flex-basis
