Thuộc tính flex trong HTML DOM Style

Giới thiệu

Thuộc tính flex trong HTML DOM Style là một shorthand (viết tắt) dùng để thiết lập hoặc lấy độ dài linh hoạt cho các phần tử có display: flex. Nó kết hợp ba thuộc tính: flexGrow, flexShrink và flexBasis.

Cú pháp

Thiết lập flex:

object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"

Giá trị

Thành phần	Mô tả
flex-grow	Định nghĩa tỷ lệ phóng to của item so với các flex item còn lại.
flex-shrink	Định nghĩa tỷ lệ co nhỏ của item so với các flex item còn lại.
flex-basis	Chỉ định kích thước ban đầu của item (chấp nhận mọi đơn vị độ dài hợp lệ).
auto	Tương đương `1 1 auto`.
initial	Giá trị mặc định: `0 1 auto`.
none	Tương đương `0 0 auto`.
inherit	Kế thừa từ phần tử cha.

Ví dụ

Ví dụ thay đổi flex của div đầu tiên và thứ tư thành none.

<!DOCTYPE html> <html> <head> <style> 
  #demo { 
    width: 400px; 
    height: 80px; 
    display: flex; 
  } 
  #demo div { 
    flex: 1 3 auto; 
  } 
  div:nth-of-type(even){ 
    box-shadow: inset 0 0 12px red; 
  } 
  div:nth-of-type(odd){ 
    box-shadow: inset 0 0 12px blue; 
  } 
</style> <script> 
  function changeFlex() { 
    document.getElementsByTagName("DIV")[1].style.flex = "none"; 
    document.getElementsByTagName("DIV")[4].style.flex = "none"; 
    document.getElementById("Sample").innerHTML = "Giá trị flex của div đầu tiên và thứ tư đã đổi thành none"; 
  } 
</script> </head> <body> 
  <div id="demo"> 
    <div id="orange"></div> 
    <div id="green"></div> 
    <div id="blue"></div> 
    <div id="red"></div> 
  </div> 
  <p>Nhấn nút để thay đổi flex property của các div</p> 
  <button onclick="changeFlex()">Thay đổi Flex</button> 
  <p id="Sample"></p> 
</body> </html>

Kết quả

Thuộc tính flex trong HTML DOM Style

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

Thuộc tính flex trong HTML DOM Style