CSS)Flex에서 Gap

gird에서의 gap

gird 속성 사용 시 자식요소의 box의 여백(공간)을 주기 위한 속성의 값이다.

 

gap과 margin의 차이는 무엇일까?

margin : 엘리먼트 요소 이외외 것에도 여백이 생긴다.
gap : 엘리먼트 요소에만(!!) 여백이 생긴다.(단, 인접요소가 없다면 적용되지 않는다.)

 

margin을 활용한 여백 주기

margin을 이용하여 여백을 주는 방법은 아래의 코드로 확인할 수 있다.

<div class="out_box">
  <div class="box">
    <div class="in_box">
    </div>
    <div class="in_box">
    </div>
    <div class="in_box">
    </div>
    <div class="in_box">
    </div>
    <div class="in_box">
    </div>
    <div class="in_box">
    </div>
  </div>
</div>

 .out_box{
padding: 30px;
}
.box{
display: flex;
flex-wrap: wrap;
width: 600px;
font-size: 0;
background: blue;
margin: -10px
}
.in_box{
display: inline-block;
vertical-align: top;
width: calc(33.3333% - 10px);
height: 200px;
margin: 5px;
background: violet;
}

확인하는 것과 같이 부모에 margin 값을 마이너스(-)값을 주는 꼼수로 이러한 여백을 만들 수 있다. 하지만, 이것의 단점은 부모요소가 content 영역을 벗어나는 것을 볼 수 있다.

물론 좌/하, 상/왼 만주는 방법도 있지만, 이것또한 열마다 재지정을 하는 이슈가 발생되어 css코드가 늘어나게된다.

 

gap을 활용한 여백 주기

아래의 코드를 확인하세요.

<div class="out_box">
  <div class="box">
    <div class="in_box">
    </div>
    <div class="in_box">
    </div>
    <div class="in_box">
    </div>
    <div class="in_box">
    </div>
    <div class="in_box">
    </div>
    <div class="in_box">
    </div>
  </div>
</div>

.out_box{
  padding: 30px;
}
.box{
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  font-size: 0;
  background: green;
  gap: 15px;
}
.in_box{
  display: inline-block;
  vertical-align: top;
  width: calc(33.3333% - 10px);
  height: 200px;
  background: yellow;
}

gap은 margin처럼 부모의 margin값을 마이너스(-)하지 않아도 자식 요소들의 여백을 줄 수 있다.

 

flex에서도 gap을?

2017년 초 gird가 브라우저에서 지원을 하였지만, ie는 사라진 순간까지도 gird와 gap을 지원하지 않았다.

(ie10,11에선 -ms-를 이용한 부분적 제한이 있었음)
그렇기 때문에 ie까지 대응하기위해 flex를 사용할때는 gap을 사용할 수 없었다.
하지만, 2022년 ie의 서비스 종료로 다시금 gap라는 속성을 flex에 적용한 사례가 웹페이지에서 목격이 된다.

 

 

사용방법은 gird사용과 동일

p{
	display: flex;
    gap: 10px;
}

이와 같이 flex를 지정한 곳에 gap을 사용하면 된다.