HTML DOM Style alignContent 속성 완벽 정리

alignContent 속성은 flexbox(플렉스 박스) 또는 grid(그리드) 레이아웃에서 항목들을 정렬할 때 사용됩니다. 특히 항목들이 컨테이너의 사용 가능한 공간을 모두 차지하지 않을 때, 교차축(cross axis) 방향으로 항목 줄(line) 사이의 간격과 위치를 조정하는 역할을 합니다.

문법(Syntax)

alignContent 속성을 설정하는 기본 문법은 다음과 같습니다.

object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"

속성 값(Value)

alignContent 속성에 사용할 수 있는 값은 아래 표와 같습니다.

값	설명
stretch	기본값(default)으로, 항목들이 컨테이너 전체를 채우도록 늘어납니다.
center	항목들을 컨테이너의 중앙에 배치합니다.
flex-start	항목들을 컨테이너의 시작 지점에 배치합니다.
flex-end	항목들을 컨테이너의 끝 지점에 배치합니다.
space-between	줄과 줄 사이에 균등한 간격을 두고 항목들을 배치합니다.
space-around	줄 앞뒤와 사이에 모두 균등한 간격을 두고 항목들을 배치합니다.
initial	속성을 기본(initial) 값으로 설정합니다.
inherit	부모 요소의 속성 값을 상속받습니다.

예제(Example)

아래 예제는 버튼을 클릭하면 JavaScript로 컨테이너의 alignContent 값을 space-around에서 flex-start로 변경하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    #container {
        width: 180px;
        height: 220px;
        padding: 10px;
        border: 1px solid #333;
        display: flex;
        flex-flow: row wrap;
        align-content: space-around;
    }
    .ele {
        width: 60px;
        height: 60px;
        background-color: skyblue;
    }
    .ele:nth-child(2n) {
        background-color: orange;
    }
</style>
<script>
    function changeAlign(){
        document.getElementById("container").style.alignContent="flex-start";
    }
</script>
</head>
<body>
<div id="container">
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
</div>
<p>아래 버튼을 클릭하면 위 div 요소의 align-content 속성이 변경됩니다.</p>
<button onclick="changeAlign()">CHANGE</button>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Style alignContent 속성 완벽 정리

CHANGE 버튼을 클릭하면 alignContent 값이 flex-start로 변경되어 항목들이 컨테이너 상단으로 이동합니다.

HTML DOM Style alignContent 속성 완벽 정리