flex 에서 gap 사용하기 (나열되는 요소에 여백 주기)

개요

보통 요소를 나열해야 하는 경우 예전 IE 를 고려하던 시절에는 간격(여백)을 주기위해 아래와 같은 방법을 썼다

• 나열되는 요소에 padding 또는 margin 으로 좌우 간격을 주고 부모요소에서 margin 을 마이너스(-) 주기
• 나열되는 요소에 오른쪽 마진 (margin-right) 또는 왼쪽 마진 (margin-right)을 주고 처음 또는 마지막 요소에는 마진을 0으로 설정하기

하지만 이럴 경우 부모 요소에서 스타일을 주어야 하고 고정적이지 않은 요소의 수일 경우 마지막 여백 등으로 인해 css 를 여러번 써야하는 경우가 생긴다

특히 요소를 display:inline-block 해야하고 inline-block 을 사용하다보면 부모의 font-size 에 영향을 받는 경우가 생겨서 css 가 더 복잡해진다

 

요새는 IE를 따로 신경 쓸 필요가 없으니 flex 를 이용해 요소를 나열하고 간격을 주면 쉽다

 

구문

/* 단일 값으로 사용할 때 */
.element {
	display: flex;
    gap: 10px; /* 상,하,좌,우 동일 값*/
}

/* 이중 값으로 사용할 때 */
.element {
	display: flex;
    gap: 10px 5px; /* 상하, 좌우 */
}

 

gap에 사용하는 값은 꼭 px 단위가 아니더라도 css 상에서 사용하는 모든 단위를 쓸 수 있다

gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;
gap: 16%;
gap: 100%;
gap: calc((100% - 20px) / 3)

 

예제

See the Pen flex에서 gap 사용하기 by woox (@woox-styler) on CodePen.

 

위 예제는 상하좌우를 동일하게 설정하였다.