Podemos reordenar elementos HTML usando muchos métodos en CSS . Usamos la propiedad order de flexbox . La propiedad de orden se usa para cambiar el orden visual y no su orden lógico. Los elementos en un contenedor se clasifican en valor de orden ascendente y luego por su orden de código fuente.
Sintaxis:
valores enteros
order: 1; order: -1;
Valores globales
order: revert; order: inherit; order: unset; order: initial; order: revert-layer;
Nota: Los valores representan el orden ordinal.
Ejemplo 1: En el siguiente código, el que tenga el valor más alto tendrá la primera prioridad. No es necesario asignar valores secuencialmente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Reorder elements</title>
<style>
#flex {
display: flex;
flex-direction: column;
}
#x {
order: 2;
}
#y {
order: 1;
}
#z {
order: 3;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3>Ordering</h3>
<div id="flex">
<div id="x">X</div>
<div id="y">Y</div>
<div id="z">Z</div>
</div>
</body>
</html>
Producción:
Si asignamos los siguientes valores a la propiedad order , la salida sería la misma que se mencionó anteriormente.
CSS
#x{
order: 5;
}
#y{
order: 3;
}
#z{
order: 8;
}
Ejemplo 2: Hay otros métodos que usan CSS. A continuación se muestran los métodos mencionados para reordenar los divs . El grupo de encabezado de tabla se comporta como elementos HTML <tbody> . El grupo de pie de página de la tabla se comporta como elementos HTML <tfoot> . La tabla se comporta como elementos HTML <table> . En consecuencia, se organizan tres divs .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Reordering Divs using CSS</title>
<style>
h1 {
color: green;
}
#wrapper {
display: table-footer-group;
}
#firstDiv {
display: table-header-group;
}
#secondDiv {
display: table;
}
</style>
</head>
<body>
<h3>Ordering</h3>
<div id="wrapper">
<h1>Welcome</h1>
</div>
<div id="firstDiv">
<h1>to</h1>
</div>
<div id="secondDiv">
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
Producción:
Ejemplo 3: la propiedad CSS flex-flow se usa para mostrar elementos flexibles (en este caso, divs) en orden inverso.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Reordering Divs using CSS</title>
<style>
.container {
/* Setup Flexbox */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Reverse Column Order */
-webkit-flex-flow: column-reverse;
flex-flow: column-reverse;
}
.container>div {
background: rgb(99, 199, 68);
color: white;
}
.container>div:last-of-type {
background: rgb(45, 71, 8);
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Ordering</h3>
<div class="container">
<div class="x">
x
</div>
<div class="y">
y
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: en este ejemplo, div con contenedor de clase está a 15 px de la parte superior, mientras que los otros div con clase firstDiv y secondDiv están a 50 px y 0 px de la parte superior, respectivamente. Por lo tanto, de acuerdo con la distancia desde la parte superior del DOM , la ordenación de los divs se realiza como se muestra en la salida.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Reordering Divs using CSS</title>
<style>
h1 {
color: green;
}
.wrapper {
position: relative;
top: 15px
}
.firstDiv {
position: absolute;
height: 100px;
top: 50px;
}
.secondDiv {
position: absolute;
height: 100px;
top: 0px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Ordering</h3>
<div class="wrapper">
first
</div>
<div class="firstDiv">
second
</div>
<div class="secondDiv">
third
</div>
</body>
</html>
Producción:
Nota: La propiedad order cambiará el contenido visual del código y el orden DOM . Afectará negativamente a la experiencia del usuario. Por ejemplo, los usuarios pueden experimentar órdenes de lectura incorrectas al usar tecnología de asistencia, como lectores de pantalla disponibles en navegadores como Microsoft Edge. Por lo tanto, debe evitarse.
Publicación traducida automáticamente
Artículo escrito por priddheshinternship y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA