Flexbox - Hộp chứa Flex

Để sử dụng Flexbox trong ứng dụng của mình, bạn cần tạo / xác định một vùng chứa linh hoạt bằng cách sử dụng display bất động sản.

Usage -

display: flex | inline-flex

Thuộc tính này chấp nhận hai giá trị

flex - Tạo một vùng chứa linh hoạt mức khối.
inline-flex - Tạo một hộp chứa linh hoạt nội tuyến.

Bây giờ, chúng ta sẽ xem cách sử dụng display tài sản với các ví dụ.

Flex

Khi chuyển giá trị này đến thuộc tính display, một vùng chứa flex cấp khối sẽ được tạo. Nó chiếm toàn bộ chiều rộng của vùng chứa mẹ (trình duyệt).

Ví dụ sau minh họa cách tạo vùng chứa linh hoạt cấp khối. Ở đây, chúng tôi đang tạo sáu hộp với các màu khác nhau và chúng tôi đã sử dụng hộp linh hoạt để giữ chúng.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:flex;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Vì chúng tôi đã đưa ra giá trị flex đến display thuộc tính, vùng chứa sử dụng chiều rộng của vùng chứa (trình duyệt).

Bạn có thể quan sát điều này bằng cách thêm đường viền vào vùng chứa như hình dưới đây.

.container {
   display:inline-flex;
   border:3px solid black;
}

Nó sẽ tạo ra kết quả sau:

Inline flex

Khi chuyển giá trị này cho display, một vùng chứa flex cấp nội tuyến sẽ được tạo. Nó chỉ diễn ra ở vị trí cần thiết cho nội dung.

Ví dụ sau minh họa cách tạo một vùng chứa flex nội tuyến. Ở đây, chúng tôi đang tạo sáu hộp với các màu khác nhau và chúng tôi đã sử dụng hộp chứa inline-flex để chứa chúng.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Vì chúng tôi đã sử dụng một container flex nội tuyến, nó chỉ chiếm không gian cần thiết để bọc các phần tử của nó.