🎨 Flex에도 Grid와 같이 gap(여백)을 쓰자

CSS Flex gap

예전에는 flex box를 사용할때, 각 item들의 사이 공간을 주기 위해서는 margin을 사용해야 했다. 하지만 margin 과 gap의 차이점은 margin은 무조건 여백을 줘서 불필요한 공간을 만들지만, gap의 경우 엘리먼트 요소들의 사이에 인접한 요소가 있을때만 공간(space)을 만들기 때문에 훨씬 모던하다.

하지만 이제 flexbox도 grid와 같이 gap를 사용할 수 있게 되었다. 문법은 그리드와 완전히 판박이니 그대로 사용하면 된다.

gap: [상하좌우 전체의 값];
gap: [상하 사이의값] [좌우 사이의값];

 

동일한 여백 주기

<div class="test-parent">
  <div class="test-child">1</div>
  <div class="test-child">2</div>
  <div class="test-child">3</div>
  <div class="test-child">4</div>
  <div class="test-child">5</div>
  <div class="test-child">6</div>
  <div class="test-child">7</div>
  <div class="test-child">8</div>
  <div class="test-child">9</div>
</div>

.test-parent {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 전체에 10공간을 준다 */
}

.test-child {
    width: 180px;
    height: 180px;
    background: gray;
    color: white;
    font-size: 3em;
}

 

각기 다른 여백 주기

gap은 전체 값을 적용할 수도 있고 띄어쓰기를 구분자로하여 상하 그리고 좌우 다르게 값을 적용하는 것도 가능하다. 

.test-parent {
  display: flex;
  flex-wrap: wrap;
  gap: 50px 10px;
}

---

# 참고자료

https://webisfree.com/2020-12-05/[css]-%EC%8A%A4%ED%83%80%EC%9D%BC%EC%86%8D%EC%84%B1-gap%EC%9D%84-flex%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0