[CSS] Flexbox - Gap 정리

1. gap이란

gap은 Flexbox 아이템 사이의 간격을 설정하는 속성입니다.
아이템 하나하나에 margin을 주지 않아도 균일한 간격을 만들 수 있습니다.

.container {
  display: flex;
  gap: 16px;
}

 

2. gap의 특징

• 아이템 사이에만 간격 적용
• 바깥 여백에는 영향 없음
• 줄바꿈(flex-wrap)이 있어도 자동으로 동일한 간격 유지
• 가독성과 유지보수성 ↑

 

3. 축 기준 간격 설정

gap은 방향에 따라 세분화할 수 있습니다.

.container {
  display: flex;
  row-gap: 12px;    /* 세로 간격 */
  column-gap: 20px; /* 가로 간격 */
}

 

또는 축약형:

gap: 12px 20px; /* row-gap column-gap */

 

 

4. 정리하면

• gap = 아이템 사이 거리 전용 속성
• 레이아웃용 간격은 margin보다 gap
• flex-wrap과 함께 쓰면 효과 극대화