Flexbox - Nội dung biện minh

Thường thì bạn có thể quan sát thấy một khoảng trống dư thừa trong hộp sau khi sắp xếp các đồ linh hoạt như hình dưới đây.

Sử dụng tài sản justify-content, bạn có thể căn chỉnh nội dung dọc theo trục chính bằng cách phân phối không gian phụ như dự định. Bạn cũng có thể điều chỉnh căn chỉnh của các flexitem, trong trường hợp chúng tràn dòng.

usage -

justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;

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

flex-start - Các mục linh hoạt được đặt ở đầu thùng chứa.
flex-end - Các vật phẩm linh hoạt được đặt ở cuối thùng hàng.
center - Các mục uốn được đặt ở tâm của thùng chứa, nơi không gian thừa được phân bổ đều ở đầu và cuối của các mục uốn.
space-between - Không gian thừa được phân bổ đều giữa các mục linh hoạt.
space-around - Khoảng trống thừa được phân bổ đều giữa các mặt hàng flex sao cho khoảng trống giữa các mép của thùng chứa và đồ bên trong nó bằng một nửa không gian giữa các mặt hàng flex.

Bây giờ, chúng ta sẽ xem cách sử dụng thuộc tính justify-content, với các ví dụ.

khởi động linh hoạt

Khi chuyển giá trị này cho thuộc tính justify-content, các mục linh hoạt được đặt ở đầu thùng chứa.

Ví dụ sau minh họa kết quả của việc truyền giá trị flex-start đến justify-content bất động sản.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:flex-start;
      }
   </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:

flex-end

Khi chuyển giá trị này cho thuộc tính justify-content, các mục linh hoạt được đặt ở cuối thùng chứa.

Ví dụ sau minh họa kết quả của việc truyền giá trị flex-end đến justify-content bất động sản.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:flex-end;
      }
   </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:

trung tâm

Khi chuyển giá trị này cho thuộc tính justify-content, các mục uốn được đặt ở trung tâm của thùng chứa, nơi không gian thừa được phân bổ đều ở đầu và cuối của mục uốn.

Ví dụ sau minh họa kết quả của việc truyền giá trị center đến justify-content bất động sản.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:center;
      }
   </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:

không gian giữa

Khi chuyển giá trị này cho thuộc tính justify-content, không gian thừa được phân bổ đều giữa các mục uốn sao cho khoảng cách giữa hai mục uốn bất kỳ là như nhau và phần đầu và cuối của các mục uốn chạm vào các cạnh của hộp đựng.

Ví dụ sau minh họa kết quả của việc truyền giá trị space-between đến justify-content bất động sản.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-between;
      }
   </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:

không gian xung quanh

Khi chuyển giá trị này cho thuộc tính justify-content, không gian thừa được phân bổ đều giữa các mục linh hoạt sao cho khoảng trống giữa hai mục linh hoạt bất kỳ là như nhau. Tuy nhiên, không gian giữa các cạnh của hộp chứa và nội dung của nó (phần đầu và phần cuối của các mục linh hoạt) bằng một nửa không gian giữa các mục linh hoạt.

Ví dụ sau minh họa kết quả của việc truyền giá trị space-around đến justify-content bất động sản.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-around;
      }
   </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:

không gian-đồng đều

Khi chuyển giá trị này cho thuộc tính justify-content, không gian thừa được phân bổ đều giữa các mục uốn sao cho khoảng cách giữa hai mục uốn bất kỳ là như nhau (bao gồm cả khoảng trống đến các cạnh).

Ví dụ sau minh họa kết quả của việc truyền giá trị space-evenly đến justify-content bất động sản.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-evenly;
      }
   </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: