Đặt các mục flex theo chiều dọc từ dưới lên trên với CSS

Sử dụng thuộc tính flex-direction với giá trị column-reverse để đặt các mục flex theo chiều dọc, từ trên xuống dưới (thực tế là đảo ngược).

Ví dụ

Bạn có thể chạy mã sau để triển khai giá trị column-reverse −

<!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>