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

Bọc các mục linh hoạt theo thứ tự ngược lại với CSS

Sử dụng flex-wrap thuộc tính quấn ngược giá trị để bọc các mục linh hoạt theo thứ tự ngược lại.

Ví dụ

Bạn có thể thử chạy mã sau để triển khai quấn ngược lại giá trị

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: #D35400;
            flex-wrap: wrap-reverse;
         }
         .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>Ans1</div>
         <div>Ans2</div>
         <div>Ans3</div>
         <div>Ans4</div>
         <div>Ans5</div>
         <div>Ans6</div>
         <div>Ans7</div>
         <div>Ans8</div>
         <div>Ans9</div>
      </div>
   </body>
</html>