꼬여버린 flex로 캐러셀 만들기

구현하고 싶었던 기능

판매중인 상품이 3개 이상일 때 x축 스크롤바가 생기면서 옆으로 넘길 수 있다.

 

하지만 현실..😰

<ul class="product-list">
  <li class="product-item">
    // 생략
  </li>
  <li class="product-item">
    // 생략
  </li>
  <li class="product-item">
    // 생략
  </li>
</ul>

.product-list {
  display: flex;
  gap: 10px;
  overflow-x: scroll;
}
.product-item {
  width: 140px;
}

크게 ul > li 로 나누어 li마다 하나의 카드(이미지와 상품명, 가격)이 들어가게 만들었다.

ul에 flex와 gap을 주어 일정한 간격을 유지하려고했으나 되지 않았다. 대체 왜..!!

 

li의 영역이 저만큼 잡혀있지만 보여지는 간격은 반 밖에 되지 않는걸 볼 수 있다.

overflow-x: scroll를 했지만 스크롤이 생기기만 할 뿐 영역이 제대로 잡히지 않았다. 

 

해결방법

 

flex 자체가 남은 여백을 나누어서 가져가기때문에 flex-grow, flex-shrink, flex-basis 다 설정해야한다. 그래서 축약형으로 flex를 사용하면 된다. 

 

 

flex-basis: flex아이템의 기본 크기를 설정
flex-grow: 기본값을 넘어 넓어질 수 있는 지를 설정하는데 1이면 화면을 전부 채울 수 있고 0이면 늘어나지 않는다.
flex-shrink: 기본값이 1로 width값을 주어도, 화면이 줄어들면 지정된 width를 무시하고 줄어든다.

 

아래와 같이 작성하면 원하는대로 만들어진다. 

flex-basis: 0;
flex-grow: 0;
flex-shrink: auto;

// 축약형
flex: 0 0 auto;