정의 및 사용 방법

gap 속성은 row-gap과 colunm-gap 속성을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

flexbox에서 gap 속성은 플렉스 아이템 사이의 행(row)과 열(colunm) 간격을 한 번에 지정할 수 있습니다.

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

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

기본 예제

CSS 데모: flexbox의 gap 데모 버튼을 클릭해 보세요!
플렉스 아이템 사이의 행(row)과 열(colunm) 간격을 한 번에 지정할 수 있습니다.
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;
    gap: /* value <= 라이브 데모에서 동적으로 구현 */;
}
.item { /* 플렉스 아이템 */
    width: /* value <= 라이브 데모에서 동적으로 구현 */;
    border: 4px solid blue;
    background-color: yellow;
}

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

설명

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

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

특징

형식 구문

CSS 
selector {
    gap: /* value */
}

구문

CSS 
/* 두 개 값 구문:
   첫 번째는 row-gap 속성의 값,
   두 번째는 colunm-gap 속성의 값을
   띄어쓰기로 구분하여 순서대로 각각의 값으로 지정 */
gap: 0 0;
gap: 0 10px;
gap: 10px 0;
gap: 3vw 10px;
gap: 2rem 5%;
gap: 2em 3vh;

/* 한 개 값 구문:
   row-gap과 colunm-gap 속성의 값을 하나의 값으로 지정 */
gap: 0;
gap: 10px;
gap: 3vw;
gap: 2rem;
gap: 2em;
gap: 5%;

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

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

값

값은 두 개 값 구문 또는 한 개 값 구문으로 지정할 수 있습니다.

두 개 값 구문

첫 번째는 row-gap 속성의 값, 두 번째는 colunm-gap 속성의 값을 띄어쓰기로 구분하여 순서대로 각각의 값으로 지정합니다.

CSS 
gap: 0 10px;
/*
다음과 동일합니다.
row-gap: 0;
column-gap: 10px;
*/

한 개 값 구문

row-gap과 colunm-gap 속성의 값을 하나의 값으로 지정합니다.

CSS 
gap: 0;
/*
다음과 동일합니다.
row-gap: 0;
column-gap: 0;
*/

gap: 10px;
/*
다음과 동일합니다.
row-gap: 10px;
column-gap: 10px;
*/

참조: row-gap 속성의 값

형식 구문 
selector {
    row-gap: normal | <길이> | <백분율(%)>
}
row-gap 속성의 값
normal 초깃값임.
  • flexbox와 grid 레이아웃에서는 0px을 나타냅니다.
  • multi-column 레이아웃에서는 1em을 나타냅니다.
<길이> 길이 값이며, 항상 양수 값입니다. (음수 값은 유효하지 않습니다.)
<백분율(%)> 플렉스 컨테이너의 높이에 대한 백분율(%)로 정의한 값이며, 항상 양수 값입니다. (음수 값은 유효하지 않습니다.)
플렉스 컨테이너의 높이에 대한 제약 조건이 없는 경우(예: height: auto) 0px로 처리됩니다.

참조: column-gap 속성의 값

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

형식 정의

gap속성의 형식 정의
초깃값 구성 속성의 초깃값은 다음과 같습니다.
적용 요소 플렉스 컨테이너, grid 컨테이너, multi-column 컨테이너
상속 아니오
애니메이션 구성 속성의 애니메이션은 다음과 같습니다.

gap과 margin

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

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 add-margin-item">Item-5</div>
    <div class="item">Item-6</div>
    <div class="item add-margin-item">Item-7</div>
    <div class="item">Item-8</div>
</div>
CSS 
.flex-container { /* 플렉스 컨테이너 */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 0;
    border: 4px solid silver;
    width: 300px;
}
.item { /* 플렉스 아이템 */
    width: 33.33333%;
    border: 4px solid blue;
    background-color: yellow;
}
.item.add-margin-item {
    background-color: red;
    margin-top: 20px;
}
실제 적용된 모습

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

활용 예제

gap 속성은 '플렉스 레이아웃'에서 플렉스 아이템 간격을 설정하는 데 정말 많이 사용됩니다.
다음은 gap 속성으로 플렉스 아이템 사이의 행(row)과 열(colunm) 간격을 한 번에 지정하는 대표적인 예제 중 하나입니다.

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 class="item">5번 아이템</div>
    <div class="item">6번 아이템</div>
</div>
CSS 
.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    gap: 10px; /* 플렉스 아이템 간격 설정 */
    padding: 10px;
    border: 2px solid #333;
    flex-flow: row wrap; /* 데스크톱 디자인에 적용 */
}
.item {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    box-sizing: border-box; /* 패딩과 테두리를 너비에 포함 */
    flex: 0 0 calc((100% - 20px) / 3); /* calc((100% - (간격개수 * gap)) / 아이템개수) */
    text-align: center;
}

@media (max-width: 750px) {
    .flex-container {
        flex-flow: column nowrap; /* 모바일 디자인에 적용 */
    }
    .item {
        flex: 1; /* 플렉스 아이템들이 가로로 꽉 차게 설정 */
    }
}

이 예제에서는 플렉스 아이템을 균등하게 배치하기 위해 flex 속성과 calc()를 사용했습니다.

실제 적용된 모습 브라우저 화면 폭을 늘리거나 줄여보세요. 반응형 웹 디자인이 구현됩니다.

브라우저 호환성

gap 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
gap 57 16 52 10.1
Flex 레이아웃에서 지원됨 84 84 63 14.5

명세서

gap 속성의 명세서 사양
명세서 사양
gap CSS Box Alignment Module Level 3
#propdef-gap

참고문헌

같이 보기