HTML DOM Style의 alignItems 속성은 플렉스(flex) 컨테이너 내부에 있는 항목들의 기본 정렬 방식을 지정하는 데 사용됩니다. 자바스크립트를 통해 동적으로 교차축(cross-axis) 방향의 정렬을 변경하고 싶을 때 유용하게 활용할 수 있습니다.
문법(Syntax)
alignItems 속성을 설정하는 문법은 다음과 같습니다.
object.style.alignItems = "stretch|center|flex-start|flex-end|baseline|initial|inherit";
속성 값
alignItems 속성에 사용할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| stretch | 기본값으로, 컨테이너 크기에 맞도록 항목을 늘려 채웁니다. |
| center | 항목을 컨테이너의 중앙에 배치합니다. |
| flex-start | 항목을 컨테이너의 시작 위치(교차축 시작점)에 배치합니다. |
| flex-end | 항목을 컨테이너의 끝 위치(교차축 끝점)에 배치합니다. |
| baseline | 항목을 컨테이너의 텍스트 기준선(baseline)에 맞춰 배치합니다. |
| initial | 해당 속성을 기본(initial) 값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
예제
다음은 Style alignItems 속성을 활용한 예제입니다. 버튼을 클릭하면 자바스크립트 함수가 실행되어 컨테이너 내 항목들의 정렬 방식이 flex-end에서 baseline으로 변경됩니다.
<!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>데모 제목</h2>
<div id="container">
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
</div>
<p>버튼을 클릭하여 위 div 요소의 align-items 속성을 변경해 보세요.</p>
<button onclick="changeAlign()">변경</button>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'변경' 버튼을 클릭하면 항목들이 baseline 기준선에 맞춰 정렬되는 것을 확인할 수 있습니다.
