HTML DOM justifyContent 속성 – 플렉스 아이템 정렬 완벽 가이드

HTML DOM의 justifyContent 속성은 플렉스(flex) 컨테이너 안에서 아이템들이 사용 가능한 공간 전체를 차지하지 못할 때, 주축(main axis) 방향으로 아이템들을 정렬하는 데 사용됩니다.

문법(Syntax)

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

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

속성 값 설명

justifyContent 속성에 사용할 수 있는 값은 다음과 같습니다.

값	설명
flex-start	아이템을 컨테이너의 시작 위치에 배치합니다. 기본(default) 값입니다.
flex-end	아이템을 컨테이너의 끝 위치에 배치합니다.
center	아이템을 컨테이너의 중앙에 배치합니다.
space-between	아이템들 사이에 균등한 간격을 두고 배치합니다.
space-around	아이템들 사이와 앞뒤에 모두 간격을 두고 배치합니다.
initial	속성을 초기(initial) 값으로 설정합니다.
inherit	부모 요소의 속성 값을 상속받습니다.

예제(Example)

버튼을 클릭하면 컨테이너의 justify-content 속성이 space-between으로 변경되는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    #demo {
        margin: auto;
        width: 400px;
        height: 120px;
        box-shadow: 0 0 0 5px brown;
        display: flex;
        flex-wrap: wrap;
    }
    #demo div {
        padding: 0;
        width: 50px;
        height: 50px;
        border: 5px solid;
        border-radius: 15%;
    }
    #demo div:nth-child(even) {
        border-color: black;
    }
    #demo div:nth-child(odd) {
        border-color: red;
    }
</style>
<script>
    function changeJustifyContent() {
        document.getElementById("demo").style.justifyContent="space-between";
        document.getElementById("Sample").innerHTML="justify-content 속성이 space-between으로 설정되었습니다.";
    }
</script>
</head>
<body>
    <div id="demo">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <p>아래 버튼을 클릭하면 위 컨테이너의 justify-content 속성이 변경됩니다.</p>
    <button onclick="changeJustifyContent()">Justify Content 변경</button>
    <p id="Sample"></p>
</body>

실행 결과(Output)

위 코드를 실행하면 빨간색과 검은색 테두리를 가진 박스들이 플렉스 컨테이너 안에 나란히 배치된 것을 확인할 수 있습니다.

HTML DOM justifyContent 속성 – 플렉스 아이템 정렬 완벽 가이드

“Justify Content 변경” 버튼을 클릭하면 −

HTML DOM justifyContent 속성 – 플렉스 아이템 정렬 완벽 가이드

버튼 클릭 후에는 justify-content 속성이 space-between으로 적용되어, 박스들이 컨테이너 양쪽 끝에 붙고 그 사이에 균등한 간격이 생기는 것을 볼 수 있습니다. 이처럼 justifyContent 속성을 활용하면 자바스크립트만으로도 플렉스 레이아웃의 정렬 방식을 동적으로 제어할 수 있습니다.