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

Căn chỉnh các dòng linh hoạt bằng CSS

Sử dụng căn chỉnh nội dung thuộc tính để căn chỉnh các đường flex. Bạn có thể thử chạy mã sau để triển khai thuộc tính align-content:

Ví dụ

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: RED;
            align-content: space-between;
            height: 150px;
            width: 600px;
            flex-wrap: wrap;
         }
         .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>