Để sắp xếp lại các Mục linh hoạt riêng lẻ bằng CSS3, hãy sử dụng thuộc tính đặt hàng. Sau đây là mã để sắp xếp lại các mặt hàng linh hoạt -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
height: 150px;
display: flex;
width: 100%;
border: 2px solid red;
}
div {
width: 200px;
height: 150px;
color: white;
text-align: center;
font-size: 30px;
}
.first {
background-color: rgb(55, 0, 255);
order:2;
}
.second {
background-color: red;
order:3;
}
.third {
background-color: rgb(140, 0, 255);
order:1;
}
</style>
</head>
<body>
<h1>Reordering individual items example</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
