CSS flexbox의 justify-content 속성

정의 및 사용 방법

flexbox에서 justify-content 속성은 플렉스 컨테이너에서 플렉스 아이템이 배치되는 주축(main axis)을 기준으로 아이템들을 어떻게 정렬할지를 지정합니다.

'플렉스 레이아웃'은 일반적인 '블록 레이아웃'보다 유연하고 다양한 레이아웃을 구현할 수 있습니다.
플렉스 컨테이너 내부에서는 콘텐츠가 플렉스 아이템 단위로 배치됩니다.

이때, flex-direction 속성은 플렉스 아이템이 배치되는 흐름의 기준이 되는 주축(main axis, 기본 축)을 결정합니다.

justify-content 속성은 이 주축을 따라 플렉스 아이템들을 어떻게 정렬할지 지정하며, 정렬 방식에 따라 발생하는 플렉스 컨테이너와 플렉스 아이템 간의 남는 여유 공간은 자동으로 분배됩니다.

특징

이 속성은 플렉스 컨테이너에 해당하는 요소에만 적용됩니다.
플렉스 아이템이나 일반 요소에 지정하면 적용되지 않습니다.

기본 예제

HTML

<div class="flex-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

CSS

.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    border: 4px solid silver;
    flex-direction: row; /* 주축(main axis, 기본 축)을 결정 */
    justify-content: /* value <= 라이브 데모에서 동적으로 구현 */
}
.item { /* 플렉스 아이템 */
     border: 4px solid blue;
     background-color: yellow;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

형식 구문

이 형식 구문(Formal syntax)은 CSS Flexible Box Layout Module Level 1 명세서를 기준으로 작성되었습니다.
justify-content 속성은 flexbox뿐만 아니라 grid와 multi-column 레이아웃에서도 사용되며, 전체 정렬 구문은 CSS Box Alignment Module Level 3 명세서를 참고하세요.

구문

CSS

/* 키워드 값 */
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

/* 글로벌 값 */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

값

justify-content 속성의 값
`flex-start`	초깃값임. 플렉스 아이템들을 주축이 되는 라인의 시작 쪽을 기준으로 순서대로 밀착하여 정렬합니다.
`flex-end`	플렉스 아이템들을 주축이 되는 라인의 끝 쪽을 기준으로 순서대로 밀착하여 정렬합니다.
`center`	플렉스 아이템들을 주축이 되는 라인의 시작과 끝 쪽의 가운데를 기준으로 순서대로 밀착하여 정렬합니다.
`space-between`	플렉스 아이템들을 주축이 되는 라인을 따라 순서대로 배치하며, 각 아이템의 양쪽에 동일한 여유 공간이 생기도록 정렬합니다. 첫 번째 플렉스 아이템은 주축이 되는 라인의 시작 쪽 가장자리에, 마지막 플렉스 아이템은 라인의 끝 쪽 가장자리에 맞춰 배치합니다. 플렉스 컨테이너와 배치되는 플렉스 아이템 간의 남는 여유 공간이 있으면, 인접한 두 플렉스 아이템 사이의 간격은 동일하게 배분합니다.
`space-around`	플렉스 아이템들을 주축이 되는 라인을 따라 플렉스 아이템들은 라인의 시작 쪽과 끝 쪽 모두 동일한 간격을 유지하며 배치합니다. 첫 번째 플렉스 아이템은 주축이 되는 라인의 시작 쪽 가장 자리에서 , 마지막 플렉스 아이템은 라인의 끝 쪽 가장 자리에 맞춰 배치합니다. 플렉스 컨테이너와 배치되는 플렉스 아이템 간의 남는 여유 공간이 있으면, 첫 번째 플렉스 아이템의 이전과 마지막 플렉스 아이템의 이후에 존재하는 공간은 인접한 플렉스 아이템 간 공간 크기의 절반을 차지합니다. 플렉스 아이템이 하나이면 주축이 되는 라인의 시작과 끝 쪽의 가운데에 배치됩니다.

`flex-direction: column`과 `justify-content`

flex-direction 속성의 값이 column일 경우 justify-content 속성에 대한 값과 그 효과가 어떻게 달라지는지 라이브 데모로 확인해 보세요.

HTML

<div class="flex-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

CSS

.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    border: 4px solid silver;
    flex-direction: column; /* 주축(main axis, 기본 축)을 결정 */
    justify-content: /* value <= 라이브 데모에서 동적으로 구현 */
}
.item { /* 플렉스 아이템 */
     border: 4px solid blue;
     background-color: yellow;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

형식 정의

justify-content 속성의 형식 정의
초깃값	`flex-start`
적용 요소	플렉스 컨테이너
상속	아니오
애니메이션	아니오

활용 예제

justify-content 속성은 실무에서 특정 박스의 콘텐츠 레이아웃을 설정하는 데 정말 많이 사용됩니다.
아래는 그중에서도 가장 대표적이라고 할 수 있는 '네비게이션 바 메뉴의 가운데 정렬'과 '사이트 헤더 레이아웃에서 양쪽 정렬'에 대한 활용 예제입니다.

네비게이션 바 메뉴의 가운데 정렬

HTML

<nav>
    <ul>
        <li><a href="">제품 보기</a></li>
        <li><a href="">개인정보처리방침</a></li>
        <li><a href="">고객센터</a></li>
    </ul>
</nav>

코드 부연설명
<nav> 태그는 다른 웹 페이지로 연결하거나, 현재 웹 페이지의 콘텐츠 내부로 연결되는 탐색(navigation)을 위한 링크(links)가 있는 영역을 나타냅니다. 일반적인 예로는 메뉴, 목차, 색인 등이 있습니다.

CSS

ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 1em;
    background-color: #e3f2fd;
}
li {
    list-style: none;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
li:not(:first-child)::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.8em;
    background-color: rgba(0, 0, 0, .6);
    margin: 0 1em;
    vertical-align: -0.06em;
    white-space: nowrap;
}

CSS :first-child 가상 클래스 사용 방법

CSS ::before 가상 요소 사용 방법

사이트 헤더 레이아웃에서 양쪽 정렬

HTML

<header class="site-header">
    <div class="logo">
        <a href="">Your Logo</a>
    </div>
    <div class="user-actions">
        <a href="">로그인</a>
        <a href="" class="btn-signup">회원가입</a>
    </div>
</header>

CSS

.site-header {
    display: flex;
    /* 로고와 사용자 액션 버튼을 양쪽 끝으로 배치 */
    justify-content: space-between;
    /* 세로 축의 중앙에 배치하여 수직 정렬을 맞춤 */
    align-items: center;
    padding: 1em 2em;
    background-color: #e3f2fd;
}
.logo a {
    font-weight: bold;
    color: #1976d2;
    text-decoration: none;
}
.user-actions a {
    margin-left: 1.5em;
    color: #666;
    text-decoration: none;
    font-size: 0.9em;
}
.user-actions .btn-signup {
    padding: 0.5em 1em;
    background-color: #1976d2;
    color: #fff;
    border-radius: 4px;
}

코드 부연설명
flexbox에서 align-items 속성은 플렉스 아이템이 배치되는 주축과 교차되는 방향 축(cross axis)을 따라 플렉스 아이템을 어떻게 정렬할지 결정합니다. align-items: center는 교차되는 방향 축(cross axis)의 가운데에 플렉스 아이템을 배치합니다.