CSS flexbox의 align-content 속성

정의 및 사용 방법

flexbox에서 align-content 속성은 플렉스 컨테이너에서 여러 줄로 배치된 플렉스 아이템의 줄을 교차축(cross axis)을 기준으로 정렬하는 방식을 지정합니다.

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

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

이 주축(main axis, 기본 축)과 수직으로 교차하는 방향의 축을 교차축(cross axis)이라고 합니다.

기본적으로 플렉스 컨테이너는 모든 플렉스 아이템을 강제로 주축으로 기준으로 한 줄에 배치하려고 하며, 플렉스 컨테이너 크기를 초과하더라도 줄바꿈이 발생하지 않습니다. 하지만 flex-wrap 속성을 사용하면, 플렉스 아이템들이 플렉스 컨테이너의 한 줄을 초과할 경우 넘치지 않고 감싸서(wrap) 다음 줄로 넘어가도록 설정할 수 있습니다.

align-content 속성은 이렇게 플렉스 컨테이너 내에서 여러 줄(Multi-line)로 배치된 플렉스 아이템의 줄을 교차축(cross axis)을 기준으로 여유 공간이 있을 때 그 공간을 분배하여 정렬하는 방식을 지정합니다.

특징

이 속성은 플렉스 컨테이너에 해당하는 요소에만 적용됩니다.
플렉스 아이템이나 일반 요소에 지정하면 적용되지 않습니다.
한 줄 플렉스 컨테이너(flex-wrap 속성의 값이 nowrap)로 설정되어 있으면 적용되지 않습니다.
플렉스 컨테이너 내에서 여러 줄(Multi-line)이 배치될 수 있도록 flex-wrap 속성의 값이 wrap 또는 wrap-reverse로 설정되어 있어야 합니다.
교차축(cross axis)을 기준으로 플렉스 컨테이너의 여유 공간이 있을 때 적용되는 정렬 방식의 차이를 확인할 수 있습니다.

기본 예제

HTML

<div class="flex-container">
    <div class="item">Item-1</div>
    <div class="item">Item-2</div>
    <div class="item">Item-3</div>
    <div class="item">Item-4</div>
    <div class="item">Item-5</div>
    <div class="item">Item-6</div>
    <div class="item">Item-7</div>
    <div class="item">Item-8</div>
</div>

CSS

.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    padding: 10px;
    border: 4px solid silver;
    height: 330px; /* 교차축(cross axis)을 기준으로 여유 공간 지정 */
    flex-direction: row;
    flex-wrap: wrap;
    align-content: /* value <= 라이브 데모에서 동적으로 구현 */
}
.item { /* 플렉스 아이템 */
    width: 33.33333%;
     border: 4px solid blue;
     background-color: yellow;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

형식 구문

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

구문

CSS

/* 키워드 값 */
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch; /* 초깃값 */

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

값

align-content 속성의 값
`flex-start`	플렉스 아이템이 배치된 줄들은 원래 순서를 유지한 상태로 플렉스 컨테이너 교차축의 시작 쪽을 기준으로 밀착하여 정렬됩니다.
`flex-end`	플렉스 아이템이 배치된 줄들은 원래 순서를 유지한 상태로 플렉스 컨테이너 교차축의 끝 쪽을 기준으로 밀착하여 정렬됩니다.
`center`	플렉스 아이템이 배치된 줄들은 원래 순서를 유지한 상태로 플렉스 컨테이너 교차축의 시작과 끝 쪽의 가운데를 기준으로 밀착하여 정렬됩니다.
`space-between`	플렉스 아이템이 배치된 줄들은 원래 순서를 유지한 상태로 플렉스 컨테이너 교차축을 따라 배치되며, 각 줄들 사이에 동일한 여유 공간이 생기도록 정렬됩니다. 첫 번째 줄은 교차축의 시작 쪽 가장자리에, 마지막 줄은 끝 쪽 가장자리에 맞춰 배치됩니다. 플렉스 컨테이너의 교차축과 배치되는 줄 간의 남는 여유 공간이 있으면, 인접한 두 줄 사이의 간격은 동일하게 배분됩니다.
`space-around`	플렉스 아이템이 배치된 줄들은 원래 순서를 유지한 상태로 플렉스 컨테이너 교차축을 따라 시작 쪽과 끝 쪽 모두 동일한 간격을 유지하며 배치됩니다. 첫 번째 줄은 교차축의 시작 쪽 가장자리에서, 마지막 줄은 교차축의 끝 쪽 가장자리에 맞춰 배치됩니다. 플렉스 컨테이너의 교차축과 배치되는 줄 간의 남는 여유 공간이 있으면, 첫 번째 줄의 이전과 마지막 줄의 이후에 존재하는 공간은 인접한 줄 간 공간 크기의 절반을 차지합니다. 줄이 하나이면 교차축의 시작과 끝 쪽의 가운데에 배치됩니다.
`stretch`	초깃값임. 플렉스 아이템이 배치된 줄들이 플렉스 컨테이너의 교차축 방향으로 여유 공간이 있으면 채우도록 늘어납니다. 이때, 교차축 방향에 대한 플렉스 아이템의 크기에 대한 제약 조건이 있으면, 제약 조건을 준수합니다. 플렉스 아이템의 크기에 대한 제약 조건은 다음과 같습니다. 플렉스 아이템에 교차축 시작 또는 끝 쪽에 해당하는 `margin`이 `auto`로 설정되어 있는 경우 플렉스 아이템에 교차축 방향에 해당하는 크기가 `auto`로 설정되어 있지 않은 경우 교차축이 세로 방향이면 `height`가 `auto` 값이 아닌 경우 교차축이 가로 방향이면 `width`가 `auto` 값이 아닌 경우 플렉스 아이템에 교차축 방향에 해당하는 최소 크기가 설정되어 있는 경우 교차축이 세로 방향이면 `min-height`가 설정되어 있는 경우 교차축이 가로 방향이면 `min-width`가 설정되어 있는 경우 플렉스 아이템에 교차축 방향에 해당하는 최대 크기가 설정되어 있는 경우 교차축이 세로 방향이면 `max-height`가 설정되어 있는 경우 교차축이 가로 방향이면 `max-width`가 설정되어 있는 경우 플렉스 컨테이너에 `align-items` 속성의 값이 `stretch`가 아닌 값으로 설정되어 있는 경우

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

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

HTML

<div class="flex-container">
    <div class="item">Item-1</div>
    <div class="item">Item-2</div>
    <div class="item">Item-3</div>
    <div class="item">Item-4</div>
    <div class="item">Item-5</div>
    <div class="item">Item-6</div>
    <div class="item">Item-7</div>
    <div class="item">Item-8</div>
</div>

CSS

.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    padding: 10px;
    border: 4px solid silver;
    height: 200px;
    width: 330px; /* 교차축(cross axis)을 기준으로 여유 공간 지정 */
    flex-direction: column;
    flex-wrap: wrap;
    align-content: /* value <= 라이브 데모에서 동적으로 구현 */
}
.item { /* 플렉스 아이템 */
    height: 50px;
    border: 4px solid blue;
    background-color: yellow;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

형식 정의

align-content 속성의 형식 정의
초깃값	`stretch`
적용 요소	플렉스 컨테이너(단, `flex-wrap` 속성의 값이 `nowrap`으로 설정되지 않아야 함)
상속	아니오
애니메이션	아니오

활용 예제

align-content 속성은 플렉스 레이아웃에서 플렉스 컨테이너의 최소 높이는 설정되어 있어야 하고, 플렉스 아이템의 개수는 하나, 두 개, 혹은 여러 개로 늘어날 수 있어, 여러 개의 경우는 여러 줄로 표현되어야 할 때 교차축을 기준으로 특정 정렬을 해야 할 때 매우 유용합니다.

예를 들어, 특정 스타일을 위해 최소 높이를 확보해 둔 '해시태그 위젯'을 떠올려 보세요.
해시태그가 많아져서 여러 줄이 되었을 때, 이 전체 줄 뭉치를 위젯의 높이를 기준으로 중앙에 정렬하고 싶다면 이 속성이 매우 유용합니다.

다음의 활용 예제를 참고하세요.

HTML

<div class="tag-container">
    <span class="tag"># HTML</span>
    <span class="tag"># CSS_레이아웃</span>
    <span class="tag"># Flexbox</span>
    <span class="tag"># 반응형웹디자인</span>
    <span class="tag"># 코딩에브리바디</span>
</div>

CSS

.tag-container {
    display: flex;
    flex-wrap: wrap; 
    align-content: center;
    gap: 10px;
    width: 300px;
    min-height: 300px;
    padding: 10px;
    border: 1px solid silver;
}
.tag {
    padding: 5px 12px;
    background-color: #e3f2fd;
    border-radius: 20px;
    font-size: 14px;
}