Thuộc tính alignContent trong HTML DOM Style

Thuộc tính alignContent dùng để căn chỉnh các dòng (lines) trong container flex wrap hoặc grid khi có không gian dư thừa trên trục chéo. Chỉ có hiệu lực khi container có nhiều dòng (flex-wrap: wrap).

Cú pháp

Để thiết lập alignContent:

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

Các giá trị

Giá trị	Mô tả
stretch	Kéo dãn các dòng lấp đầy container (mặc định).
center	Căn giữa các dòng theo trục chéo.
flex-start	Căn các dòng ở đầu container.
flex-end	Căn các dòng ở cuối container.
space-between	Phân bố đều, dòng đầu ở đầu, dòng cuối ở cuối.
space-around	Phân bố đều với khoảng cách bằng nhau quanh các dòng.
initial	Đặt về giá trị mặc định.
inherit	Kế thừa từ phần tử cha.

Ví dụ

Ví dụ minh họa alignContent:

<!DOCTYPE html> <html> <head> <style> 
  #container { 
    width: 180px; 
    height: 220px; 
    padding: 10px; 
    border: 1px solid #333; 
    display: flex; 
    flex-flow: row wrap; 
    align-content: space-around; 
  } 
  .ele { 
    width: 60px; 
    height: 60px; 
    background-color: skyblue; 
  } 
  .ele:nth-child(2n) { 
    background-color: orange; 
  } 
</style> 
<script> 
  function changeAlign(){ 
    document.getElementById("container").style.alignContent = "flex-start"; 
  } 
</script> </head> 
<body> 
<div id="container"> 
  <div class="ele"></div> 
  <div class="ele"></div> 
  <div class="ele"></div> 
  <div class="ele"></div> 
  <div class="ele"></div> 
  <div class="ele"></div> 
</div> 
<p>Nhấn nút để thay đổi alignContent thành flex-start</p> 
<button onclick="changeAlign()">THAY ĐỔI</button> 
</body> </html>

Kết quả

Ban đầu các dòng phân bố space-around:

Thuộc tính alignContent trong HTML DOM Style

Sau khi nhấn nút, các dòng dồn lên đầu (flex-start):

Thuộc tính alignContent trong HTML DOM Style