Thuộc tính justifyContent trong HTML DOM Style

Giới thiệu

Thuộc tính justifyContent trong HTML DOM Style dùng để căn chỉnh các flex item theo trục chính (main axis) theo chiều ngang khi chúng không chiếm hết không gian có sẵn.

Cú pháp

Thiết lập justifyContent:

object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"

Giá trị

Giá trị	Mô tả
flex-start	Căn các item về đầu container (mặc định).
flex-end	Căn các item về cuối container.
center	Căn các item ở giữa container.
space-between	Các item cách đều nhau, item đầu ở đầu, item cuối ở cuối.
space-around	Các item cách đều nhau, có khoảng trống trước item đầu và sau item cuối.
initial	Đặt về giá trị mặc định.
inherit	Kế thừa từ phần tử cha.

Ví dụ

Ví dụ thay đổi justify-content từ mặc định sang space-between.

<!DOCTYPE html> <html> <head> <style> 
  #demo { 
    margin: auto; 
    width: 400px; 
    height: 120px; 
    box-shadow: 0 0 0 5px brown; 
    display: flex; 
    flex-wrap: wrap; 
  } 
  #demo div { 
    padding: 0; 
    width: 50px; 
    height: 50px; 
    border: 5px solid; 
    border-radius: 15%; 
  } 
  #demo div:nth-child(even) { 
    border-color: black; 
  } 
  #demo div:nth-child(odd) { 
    border-color: red; 
  } 
</style> <script> 
  function changeJustifyContent() { 
    document.getElementById("demo").style.justifyContent = "space-between"; 
    document.getElementById("Sample").innerHTML = "Thuộc tính justify-content đã được đặt thành space-between"; 
  } 
</script> </head> <body> 
  <div id="demo"> 
    <div></div> 
    <div></div> 
    <div><div> 
    <div></div> 
    <div></div> 
  </div> 
  <p>Nhấn nút để thay đổi justify-content của container</p> 
  <button onclick="changeJustifyContent()">Thay đổi Justify Content</button> 
  <p id="Sample"></p> 
</body>

Kết quả

Thuộc tính justifyContent trong HTML DOM Style

Sau khi nhấn nút Thay đổi Justify Content:

Thuộc tính justifyContent trong HTML DOM Style