El enfoque de este artículo es hacer que los elementos flexibles se muestren en orden inverso y ajustarlos si es necesario mediante el uso de una propiedad de ajuste flexible en CSS.
La propiedad se establece en Wrap-reverse Value. Esta propiedad se usa para invertir el flujo de los elementos flexibles cuando se ajustan a nuevas líneas.
Sintaxis:
flex-wrap: wrap-reverse;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 400px;
height: 300px;
border: 5px solid black;
display: flex;
flex-wrap: wrap-reverse;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
}
h3 {
margin-top:-20px;
margin-left:50px;
} aa
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>How to make the flexible items
display in reverse order, and wrap
if necessary usingHTML5?</h3>
<div id="main">
<div style="background-color: #009900;">1</div>
<div style="background-color: #00cc99;">2</div>
<div style="background-color: #0066ff;">3</div>
<div style="background-color: #66ffff;">4</div>
<div style="background-color: #660066;">5</div>
<div style="background-color: #663300;">6</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA