La propiedad order en CSS se usa para especificar el orden de los elementos flexibles dentro del contenedor. Entonces, para establecer el orden de los elementos flexibles dentro del elemento de división, usamos la propiedad order y establecemos el orden de los elementos en CSS. En este artículo, aprenderemos cómo establecer el orden de los elementos flexibles dentro del elemento de división en CSS.
Sintaxis:
order: value;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
center{
margin: 50px;
color:green;
font-size: 60px;
}
.parent{
display: flex;
border: solid 3px red;
width: 400px;
}
.gfg1{
order: 2;
background-color: wheat;
}
.gfg2{
order: 1;
background-color: rgb(197, 197, 197);
}
.gfg3{
order: 3;
background-color:azure;
}
</style>
</head>
<body>
<center>
<div class="parent">
<div class="gfg1">for</div>
<div class="gfg2">Geeks</div>
<div class="gfg3">Geeks</div>
</div>
</center>
</body>
</html>
Producción:
-
Antes de aplicar la propiedad order:
-
Después de aplicar la propiedad order:
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA