<aside> 💡 자식, flex-item에 특정 사이즈를 입력했을때, 내가 지정한 사이즈가 유지되지 않고, 사이즈가 줄어버리는 것을 방지하고, 스크롤기능이 되도록 만들어 보자.

</aside>

Untitled

우선, 줄어드는 이유는 flex-shrink: 1이기 때문이다. 그렇기 때문에, 아래와 같이 설정해 주자. 하지만, 이렇게만 해서는 내가 원하는 대로, 넘어가는 부분이 스크롤 효ㅘ가 생기지 않는다.

부모 요소에도 아래와 같이 추가해주자.

.flex__parent {
  --size: 70px;
  display: flex;
  **flex-wrap: nowrap;**
  **overflow-x: auto;**
  .flex__child {
    **flex: 0 0 auto;**
    border-radius: 50%;
    height: var(--size);
    width: var(--size);
		//...
  }
}

이렇게 구현 하고보니, 스크롤을 넘길때, 카테고리의 시작지점에 딱딱 멈춰지면, UX적으로 더 발전 시킬 수 있을 것 같아 찾아보니, 아래와 같은 방법이 있었다.

부모 컨테이너에 scroll-snap-type: x mandatory을 넣어주고,

자식 아이템에 scroll-snap-align: start을 넣어주면, 넘길때 딱딱 아이템들이 시작지점에 붙는 걸 볼 수 있었다.

.flex__parent {
  --size: 70px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
	**scroll-snap-type: x mandatory;**
  .flex__child {
    flex: 0 0 auto;
    border-radius: 50%;
    height: var(--size);
    width: var(--size);
	**scroll-snap-align: start;**
		//...
  }
}