Sử dụng flex-direction thuộc tính có giá trị hàng để đặt các mục linh hoạt theo chiều dọc, theo thứ tự ngược lại.
Ví dụ
Bạn có thể thử chạy mã sau để triển khai giá trị đảo ngược cột -
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
flex-direction: column-reverse;
background-color: orange;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
</div>
</body>
</html>