La propiedad order de CSS se puede usar para pedir artículos flexibles. Especifica el orden de un elemento flexible con respecto a los demás elementos flexibles. El elemento tiene que ser un elemento flexible para que funcione la propiedad order. Los elementos se muestran en orden ascendente de sus valores de orden. Si dos elementos tienen el mismo valor de orden, se muestran en función de su aparición en el código fuente.
Sintaxis:
order: integer | initial | inherit
Valores de propiedad:
- Entero: indica el orden de los elementos flexibles. El valor predeterminado de un elemento flexible es 0.
- Inicial: Establece la propiedad a su valor por defecto.
- Heredar: Significa que el elemento asociado toma el valor especificado de su propiedad de orden de elemento padre.
Ejemplo 1:
<!DOCTYPE>
<html>
<head>
<title>
CSS | Ordering Flex Items
</title>
<style>
#GFG {
width: 400px;
height: 100px;
border: 1px solid #d3d3d3;
display: -webkit-flex; /* Safari */
display: flex;
}
#GFG div {
width: 70px;
height: 70px;
}
/* Safari 6.1+ */
div#second {-webkit-order: 2;}
div#fourth {-webkit-order: 4;}
div#third {-webkit-order: 3;}
div#first {-webkit-order: 1;}
/* Normal syntax */
div#second {order: 2;}
div#fourth {order: 4;}
div#third {order: 3;}
div#first {order: 1;}
</style>
</head>
<body>
<div id="GFG">
<div style="background-color:yellow;" id="second"></div>
<div style="background-color:blue;" id="fourth"></div>
<div style="background-color:green;" id="third"></div>
<div style="background-color:red;" id="first"></div>
</div>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE>
<html>
<head>
<title>
CSS | Ordering Flex Items
</title>
<style>
#GFG {
width: 400px;
height: 100px;
border: 1px solid #d3d3d3;
display: -webkit-flex; /* Safari */
display: flex;
}
#GFG div {
width: 70px;
height: 70px;
}
/* Safari 6.1+ */
div#second {-webkit-order: 2;}
div#fourth {-webkit-order: 4;}
div#third {-webkit-order: 3;}
div#first {-webkit-order: 1;}
/* Normal syntax */
div#second {order: 2;}
div#fourth {order: 4;}
div#third {order: 3;}
div#first {order: 1;}
</style>
</head>
<body>
<div id="GFG">
<div style="background-color:green;" id="second"></div>
<div style="background-color:pink;" id="fourth"></div>
<div style="background-color:black;" id="third"></div>
<div style="background-color:violet;" id="first"></div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con Ordering Flex Items se enumeran a continuación:
- Google Chrome 29.0, 21.0 -webkit-
- Mozilla Firefox 28.0, 18.0 -moz-
- Internet Explorer 11.0
- Safari 9.0, 6.1 -webkit-
- Ópera 17.0