Giới thiệu
Thuộc tính flexBasis trong HTML DOM Style dùng để chỉ định kích thước ban đầu của một phần tử có display flex. Thuộc tính này có độ ưu tiên cao hơn width cho bất kỳ giá trị nào khác auto của flex-basis.
Cú pháp
Thiết lập flexBasis:
object.style.flexBasis = "number|auto|initial|inherit"
Giá trị
| Giá trị | Mô tả |
|---|---|
| number | Chỉ định chiều dài ban đầu của flex item bằng phần trăm hoặc đơn vị độ dài hợp lệ. |
| auto | Đặt chiều dài bằng chiều dài của flex item. Nếu không chỉ định, sẽ dựa trên nội dung. Đây là giá trị mặc định. |
| initial | Đặt thuộc tính về giá trị mặc định. |
| inherit | Kế thừa giá trị từ phần tử cha. |
Ví dụ
Ví dụ thay đổi flex-basis của các hình ảnh bên trong các div từ 110px sang 200px.
<!DOCTYPE html> <html> <head> <style>
#demo, #demo2{
background-color: #fff8dc;
margin: 10px;
height: 100px;
box-shadow: 0 0 0 4px brown;
display: flex;
}
#demo div {
flex-basis: 110px;
}
</style> <script>
function changeFlexBasis() {
for(var i=1; i<3; i++){
document.getElementsByTagName("DIV")[i].style.flexBasis = "200px";
}
document.getElementById("Sample").innerHTML = "Giá trị flex basis đã tăng lên 200px";
}
</script> </head> <body>
<h2>Demo Heading</h2>
<div id="demo">
<div><img src="https://www.tutorialspoint.com/images/home_tensor_flow.png"></div>
<div><img src="https://www.tutorialspoint.com/images/home_blockchain_python.png"></div>
<div><img src="https://www.tutorialspoint.com/images/multilanguage-tutorials.png"></div>
</div>
<p>Nhấn nút để thay đổi flex basis cho hình ảnh trong div</p>
<button onclick="changeFlexBasis()">Thay đổi Flex Basis</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Sau khi nhấn nút Thay đổi Flex Basis:
