Thuộc tính flexDirection trong HTML DOM Style

Giới thiệu

Thuộc tính flexDirection trong HTML DOM Style được dùng để thiết lập hoặc lấy hướng sắp xếp các phần tử flex (flex items) bên trong một flex container.

Cú pháp

Thiết lập flexDirection:

object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"

Giá trị

Ví dụ

Ví dụ dưới đây minh họa việc thay đổi hướng flex từ column-reverse sang row-reverse khi nhấn nút.

<!DOCTYPE html> <html> <head> <style> 
  #demo { 
    box-shadow: 0 0 0 3px #a323c3; 
    display: flex; 
    flex-direction: column-reverse; 
  } 
  #demo div { 
    margin: auto; 
    border: thin solid green; 
  } 
</style> <script> 
  function changeFlexDirection() { 
    document.getElementById("demo").style.flexDirection = "row-reverse"; 
    document.getElementById("Sample").innerHTML = "Hướng flex của container div đã thay đổi thành row-reverse"; 
  } 
</script> </head> <body> 
  <div id="demo"> 
    <div>1 <img src="https://www.tutorialspoint.com/images/3d.png"></div> 
    <div>2 <img src="https://www.tutorialspoint.com/images/blockchain.png"></div> 
    <div>3 <img src="https://www.tutorialspoint.com/images/css.png"></div> 
    <div>4 <img src="https://www.tutorialspoint.com/images/reactjs.png"></div> 
  </div> 
  <p>Nhấn nút dưới đây để thay đổi hướng flex của container div</p> 
  <button onclick="changeFlexDirection()">Thay đổi Flex Direction</button> 
  <p id="Sample"></p> 
</body> </html>

Kết quả

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