HTML DOM 스타일 alignItems 속성은 유연한 컨테이너 내부에 있는 항목 기본 정렬을 언급하는 데 사용됩니다.
구문
다음은 −
의 구문입니다.alignItems 속성 설정 -
object.style.alignContent = " stretch|center|flex-start|flex-end|baseline|initial|inherit"
값
다음은 값이 될 수 있습니다 -
| 값 | 설명 |
|---|---|
| 스트레치 | 기본값이며 컨테이너에 맞게 항목을 늘리는 데 사용됩니다. |
| 중앙 | 컨테이너의 중앙에 항목을 배치하는 데 사용됩니다. |
| 플렉스 스타트 | 컨테이너의 시작 부분에 항목을 배치합니다. |
| 플렉스 엔드 | 컨테이너 끝에 항목을 배치합니다. |
| 기준 | 컨테이너 기준선에 항목을 배치하려면 |
| 초기 | 이 속성을 초기 값으로 설정합니다. |
| 상속 | 상위 속성 값을 상속합니다. |
예시
Style alignItems 속성의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 180px;
height: 220px;
padding: 10px;
border: 1px solid #333;
display: flex;
align-items:flex-end;
flex-flow: row wrap;
}
.ele {
width: 60px;
height: 60px;
background-color: skyblue;
}
.ele:nth-child(2n) {
background-color: orange;
}
</style>
<script>
function changeAlign(){
document.getElementById("container").style.alignItems="baseline";
}
</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 items property of the above div by clicking the button</p>
<button onclick="changeAlign()">CHANGE</button>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE 버튼을 클릭하면 -
