Computer >> Máy Tính >  >> Lập trình >> CSS

Đặt các mục linh hoạt theo chiều ngang từ phải sang trái bằng CSS

Sử dụng flex-direction thuộc tính có giá trị ngược hàng để đặt các mục linh hoạt theo chiều ngang từ phải sang trái.

Ví dụ

Bạn có thể thử chạy mã sau để triển khai đảo ngược hàng giá trị

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            flex-direction: row-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>