Thuộc tính HTML DOM alignSelf được sử dụng để chỉ định căn chỉnh mục nhất định có bên trong một vùng chứa linh hoạt. Thuộc tính alignSelf được sử dụng để ghi đè giá trị căn chỉnh được chỉ định trong bố cục hiển thị dạng lưới hoặc linh hoạt của phần tử.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính alignSelf -
object.style.alignSelf = "auto|stretch|center|flex-start|flex-end|baseline|initial|inherit"
Giá trị
Sau đây là các giá trị của thuộc tính alignSelf -
| Giá trị | Mô tả |
|---|---|
| Căng da | Đây là giá trị mặc định và được sử dụng để kéo giãn các mục cho vừa với vùng chứa. |
| Trung tâm | Điều này được sử dụng để định vị các mục ở tâm của vùng chứa. |
| flex-start | Để định vị các mục ở đầu vùng chứa. |
| flex-end | Để định vị các mục ở cuối vùng chứa. |
| đường cơ sở | Để định vị các mục ở đường cơ sở vùng chứa |
| tên ban đầu | Để đặt thuộc tính này thành giá trị ban đầu. |
| Kế thừa | Để kế thừa giá trị thuộc tính mẹ. |
Ví dụ
Chúng ta hãy xem ví dụ về thuộc tính Style alignSelf -
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 180px;
height: 220px;
padding: 10px;
border: 1px solid #333;
display: flex;
align-items:baseline;
flex-flow: row wrap;
}
.ele {
width: 60px;
height: 60px;
background-color: skyblue;
}
.ele:nth-child(2n) {
background-color: orange;
}
</style>
<script>
function changeAlign(){
document.getElementsByClassName("ele")[1].style.alignSelf="flex-end";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<div id="container">
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
</div>
<p>Change the align Self property of the above div by clicking the below button</p>
<button onclick="changeAlign()">CHANGE</button>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút THAY ĐỔI -
