[CSS] display: flex 에서 sticky 사용하는 방법

예전 프로젝트에서 이거 때문에 삽질 좀 했던 것 같은데 또 까먹었다. 별거 없기 때문에 쓸 것도 없다. Check 1. 부모 요소에서 overflow 설정 부모 컴포넌트에서 overflow가 hidden; auto; scroll;이 아닌지 확인해준다. sticky는 뷰포트가 아니라 부모 컨테이너에 영향을 받는다고 한다. Check 2. 부모 요소의 크기를 설정해줬는가? 크기를 적절하게 설정해줘야 한다. 부모의 위치에 대해서 붙기 때문에, 개발자 도구에서 크기를 가지도록 설정해주면 된다. Check 3. [가장 중요⭐] align-self: start 해주기! align-self는 flex 내부 요소의 정렬을 스스로 설정할 수 있도록 지원해준다. start로 넣어주면 flex container 앞쪽으로 정..

2022.10.02