HTML DOM alignSelf 속성은 유연한 컨테이너 내부에 있는 주어진 항목 정렬을 지정하는 데 사용됩니다. alignSelf 속성은 요소의 그리드 또는 플렉스 디스플레이 레이아웃에서 지정된 align-items 값을 재정의하는 데 사용됩니다.
구문
다음은 −
의 구문입니다.alignSelf 속성 설정하기 -
object.style.alignSelf = "auto|stretch|center|flex-start|flex-end|baseline|initial|inherit"
값
다음은 alignSelf 속성의 값입니다 -
| 값 | 설명 |
|---|---|
| 스트레치 | 기본값이며 컨테이너에 맞게 항목을 늘리는 데 사용됩니다. |
| 중앙 | 컨테이너의 중앙에 항목을 배치하는 데 사용됩니다. |
| 플렉스 스타트 | 컨테이너의 시작 부분에 항목을 배치합니다. |
| 플렉스 엔드 | 컨테이너 끝에 항목을 배치합니다. |
| 기준 | 컨테이너 기준선에 항목을 배치하려면 |
| 초기 | 이 속성을 초기 값으로 설정합니다. |
| 상속 | 상위 속성 값을 상속합니다. |
예시
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> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE 버튼을 클릭하면 -
