Esta propiedad se usa para especificar el orden de cada artículo flexible en relación con otros artículos dentro del contenedor flexible. Solo da la posición a los elementos presentes en el contenedor y los clasifica en un orden diferente según lo desee el usuario. Si el elemento no es el elemento flexible, esta propiedad ya no existe.
Sintaxis:
order: number|initial|inherit;
Valores de propiedad:
1. número: Esta propiedad se usa para especificar el orden del artículo flexible y le da un número a cada artículo de acuerdo con el requerimiento del usuario.
Sintaxis:
order:number;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>order property</title>
<style>
#main {
width: 400px;
height: 260px;
border: 5px solid black;
display: flex;
flex-wrap: nowrap;
margin-left:70px;
margin-bottom:70px;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
margin-top:50px;
}
h2{
color:green;
margin-left:100px;
}
}
h3 {
margin-top:-20px;
margin-left:50px;
}
div#gfg{order:4;}
div#geeks{order:5;}
div#sudo{order:6;}
div#for{order:1;}
div#geek{order:2;}
div#g{order:3;}
div{
color:white;}
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>order:number;</h2>
<div id="main">
<div style="background-color:#009900;"id="gfg">
geeks</div>
<div style="background-color:#00cc99;"id="geeks">
for</div>
<div style="background-color:#0066ff;"id="sudo">
geeks3</div>
<div style="background-color:#66ffff;color:black;"
id="for">
sudo</div>
<div style="background-color:#660066;"id="geek">
placement</div>
<div style="background-color:#663300;"id="g">
GFG</div>
</div>
</center>
</body>
</html>
Producción:
2. initial: Establece la propiedad a su valor por defecto.
Sintaxis:
order:initial;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>order property</title>
<style>
#main {
width: 400px;
height: 260px;
border: 5px solid black;
display: flex;
flex-wrap: nowrap;
margin-left:70px;
margin-bottom:70px;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
margin-top:50px;
}
h2{
color:green;
margin-left:100px;
}
}
h3 {
margin-top:-20px;
margin-left:50px;
}
div{
order:initial;}
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>order:initial;</h2>
<div id="main">
<div style="background-color:#009900;">
geeks</div>
<div style="background-color:#00cc99;">
for</div>
<div style="background-color:#0066ff;">
geeks3</div>
<div style="background-color:#66ffff;color:black;"
id="for">
sudo</div>
<div style="background-color:#660066;">
placement</div>
<div style="background-color:#663300;">
GFG</div>
</div>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad order se enumeran a continuación:
- Google cromo 29
- Borde 12
- explorador de Internet 11
- Firefox 20
- Ópera 12.1
- Safari 9
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA