CSS flexbox의 column-gap 속성

정의 및 사용 방법

flexbox에서 column-gap 속성은 플렉스 아이템과 아이템 사이의 열(column) 간격을 지정합니다.
즉, 좌우에 인접한 아이템 사이의 간격을 지정합니다.

알아두세요!
column-gap 속성은 flexbox, grid, multi-column 레이아웃에서 공통으로 사용할 수 있습니다.
이 글에서는 flexbox에서의 column-gap 속성만 설명합니다.

flexbox 레이아웃에서는 콘텐츠가 플렉스 컨테이너 안에서 플렉스 아이템 단위로 배치됩니다.

'플렉스 레이아웃'의 설정 방식에 따라 플렉스 아이템들은 가로나 세로로 정렬되어 배치될 수도 있으며, 한 줄 또는 여러 줄로도 배치될 수 있습니다. column-gap 속성을 사용하면 좌우에 인접한 플렉스 아이템 사이의 열(column) 간격을 지정할 수 있습니다.

특징

이 속성은 플렉스 컨테이너에 해당하는 요소에 지정해야합니다.
플렉스 아이템에 직접 지정하면 적용되지 않습니다.

기본 예제

CSS 데모: flexbox의 column-gap 데모 버튼을 클릭해 보세요!
플렉스 아이템과 아이템 사이의 열(column) 간격을 지정할 수 있습니다. 즉, 좌우에 인접한 아이템 사이의 간격을 지정할 수 있습니다.

Item-1

Item-2

Item-3

Item-4

Item-5

Item-6

Item-7

Item-8

Item-9

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 class="item">Item-9</div>
</div>

CSS

.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    border: 4px solid silver;
    flex-wrap: wrap;
    column-gap: /* value <= 라이브 데모에서 동적으로 구현 */;
}
.item { /* 플렉스 아이템 */
    width: /* value <= 라이브 데모에서 동적으로 구현 */;
    border: 4px solid blue;
    background-color: yellow;
}

/* 일부 스타일 코드는 가독성을 위해 생략했습니다! */

형식 구문

구문

CSS

column-gap: normal; /* 초깃값. 레이아웃에 따라 계산되는 기본값 (flexbox에서는 0px) */

/* <길이> 값 */
column-gap: 0;
column-gap: 10px;
column-gap: 3vw;
column-gap: 2rem;
column-gap: 2em;

/* <백분율(%)> 값 */
column-gap: 5%;
column-gap: 20%;

/* 글로벌 값 */
column-gap: inherit;
column-gap: initial;
column-gap: revert;
column-gap: revert-layer;
column-gap: unset;

값

column-gap 속성의 값
`normal`	초깃값임. flexbox와 grid 레이아웃에서는 `0px`를 나타냅니다. multi-column 레이아웃에서는 `1em`를 나타냅니다.
`<길이>`	길이 값이며, 항상 양수 값입니다. (음수 값은 유효하지 않습니다.)
`<백분율(%)>`	플렉스 컨테이너의 너비에 대한 백분율(%)로 정의한 값이며, 항상 양수 값입니다. (음수 값은 유효하지 않습니다.)

형식 정의

column-gap 속성의 형식 정의
초깃값	`normal`
적용 요소	플렉스 컨테이너, grid 컨테이너, multi-column 컨테이너
상속	아니오
애니메이션	`<길이>`, `<백분율(%)>`, `calc()`로 계산된 값

`column-gap`과 `margin`

column-gap이 적용된 방향의 플렉스 아이템에 margin이 설정되어 있으면, column-gap과 margin은 서로 영향을 주지 않고 각각 적용되며, 그 값이 함께 반영됩니다.

HTML

<div class="flex-container">
    <div class="item">Item-1</div>
    <div class="item add-margin-item">Item-2</div>
    <div class="item">Item-3</div>
</div>

CSS

.flex-container { /* 플렉스 컨테이너 */
    display: inline-flex;
    column-gap: 20px;
    border: 4px solid silver;
}
.item { /* 플렉스 아이템 */
    padding: 5px;
    border: 4px solid blue;
    background-color: yellow;
}
.item.add-margin-item {
    background-color: red;
    margin-right: 20px;
}

위의 예제처럼 특정 플렉스 아이템에 margin이 추가되면, 해당 위치의 간격에 column-gap 값과 함께 반영됩니다.