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