CSS flexbox의 row-gap 속성

정의 및 사용 방법

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

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

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

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

특징

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

기본 예제

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; /* 플렉스 컨테이너 생성 */
    border: 4px solid silver;
    flex-wrap: wrap;
    row-gap: /* value <= 라이브 데모에서 동적으로 구현 */
}
.item { /* 플렉스 아이템 */
    width: 33.33333%;
    border: 4px solid blue;
    background-color: yellow;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

형식 구문

구문

CSS

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

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

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

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

값

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

형식 정의

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

`row-gap`과 `margin`

row-gap이 적용된 방향의 플렉스 아이템에 margin이 설정되어 있으면, row-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;
    row-gap: 10px;
    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;
}