El propósito del artículo es establecer el orden de los artículos flexibles usando CSS. Puede lograr esta tarea utilizando la propiedad de orden de CSS.
Propiedad de orden de CSS : esta propiedad se utiliza para especificar el orden de un elemento flexible en relación con el resto de los elementos flexibles dentro del mismo contenedor y tener en cuenta que se deben establecer elementos como flexibles.
Sintaxis:
order: value;
Acercarse:
Cree la página Html con varios elementos de división y asigne todos los elementos div usando diferentes números de identificación. Usando la propiedad order, puede reorganizar estos cuadros en el orden correcto en cualquier momento.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#gfg1 {
margin-left: 145px;
width: 350px;
height: 100px;
border-style: groove;
display: flex;
background-color: lightgrey;
}
#gfg1 div {
width: 70px;
height: 70px;
}
#gfg2 {
margin-left: 145px;
width: 350px;
height: 100px;
border-style: groove;
display: flex;
background-color: lightgrey;
}
#gfg2 div {
width: 70px;
height: 70px;
}
#gfg3 {
margin-left: 145px;
width: 280px;
height: 100px;
border-style: groove;
display: flex;
background-color: lightgrey;
}
#gfg3 div {
width: 70px;
height: 70px;
}
body {
text-align: center;
font-size: 20px;
}
div#div1 {
order: 2;
}
div#div2 {
order: 3;
}
div#div3 {
order: 4;
}
div#div4 {
order: 1;
}
div#div0 {
order: 5
}
</style>
</head>
<body>
<h1 style="color:green">GeeksForGeeks</h1>
<div id=g fg1>
<div style="background-color:green;"
id="div0"></div>
<div style="background-color:lightgreen;"
id="div1">Geeks</div>
<div style="background-color:green;"
id="div2">For</div>
<div style="background-color:lightgreen;"
id="div3">Geeks</div>
<div style="background-color:green;"
id="div4"></div>
</div>
<div id=g fg2>
<div style="background-color:green;"
id="div0">portal</div>
<div style="background-color:lightgreen;"
id="div1">a</div>
<div style="background-color:green;"
id="div2">computer</div>
<div style="background-color:lightgreen;"
id="div3">science</div>
<div style="background-color:green;"
id="div4">is</div>
</div>
<div id=g fg3>
<div style="background-color:green;"
id="div0"></div>
<div style="background-color:lightgreen;"
id="div1"></div>
<div style="background-color:green;"
id="div2">for</div>
<div style="background-color:lightgreen;"
id="div3">geeks</div>
</div>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por krishnanand3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA