Thuộc tính alignItems trong HTML DOM Style

Thuộc tính alignItems xác định căn chỉnh mặc định cho tất cả các item bên trong container flex hoặc grid theo trục chéo (cross axis).

Cú pháp

Để thiết lập alignItems:

object.style.alignItems = "stretch|center|flex-start|flex-end|baseline|initial|inherit"

Các giá trị

Giá trị	Mô tả
stretch	Kéo dãn item lấp đầy chiều cao container (mặc định).
center	Căn giữa tất cả item theo trục chéo.
flex-start	Căn tất cả item ở đầu container.
flex-end	Căn tất cả item ở cuối container.
baseline	Căn theo đường cơ sở của text.
initial	Đặt về giá trị mặc định.
inherit	Kế thừa từ phần tử cha.

Ví dụ

Ví dụ minh họa alignItems:

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

Kết quả

Ban đầu các item căn flex-end (cuối container):

Thuộc tính alignItems trong HTML DOM Style

Sau khi nhấn nút, chuyển sang căn baseline:

Thuộc tính alignItems trong HTML DOM Style