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

Làm cách nào để đặt căn chỉnh giữa các mục bên trong một vùng chứa linh hoạt khi các mục không sử dụng tất cả không gian có sẵn với JavaScript?

Sử dụng alignContent trong JavaScript để đặt căn chỉnh giữa các mục bên trong một vùng chứa linh hoạt.

Ví dụ

Bạn có thể thử chạy mã sau để triển khai alignContent thuộc tính trong JavaScript - 

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 1px solid #000000;
            width: 240px;
            height: 150px;
            flex-flow: row wrap;
            align-content: space-around;
            display: flex;
         }
         #box div {
            height: 80px;
            width: 80px;
         }
      </style>
   </head>

   <body>
      <div id = "box">
         <div style = "background-color:orange;" ID = "myID1">DIV1</div>
         <div style = "background-color:blue;" id = "myID2">DIV2</div>
         <div style = "background-color:yellow;" id = "myID3">DIV3</div>
      </div>
      <button onclick="display()"> Set </button>
      <script>
         function display() {
            document.getElementById("box").style.alignContent = "space-between";
         }
      </script>
   </body>
</html>