내 고정 요소가 Flexbox 컨테이너에서 작동하지 않는 이유는 무엇입니까?

Flexbox Gotcha: Position: Sticky 요소가 예측할 수 없게 동작합니다

개발자는 Flexbox 컨테이너 내에서 position:sticky를 사용할 때 예상치 못한 동작에 직면하는 경우가 많습니다. 기본적으로 Flexbox 요소는 사용 가능한 공간을 채우기 위해 늘어납니다. 결과적으로 모든 요소의 높이가 동일해지며, 이로 인해 스크롤이 불가능해지고 고정 요소가 작동하지 않게 됩니다.

해결책은 고정 요소의 align-self 속성을 수정하는 데 있습니다. flex-start로 높이를 자동으로 재설정합니다. 이를 통해 스크롤이 가능해지고 고정 요소가 의도한 위치에 고정될 수 있습니다.

예:

다음 코드에서 고정 요소는 정렬될 때까지 올바르게 작동하지 않았습니다. self: flex-start가 추가되었습니다:

<div>
<pre class="brush:php;toolbar:false">.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;
}
.sticky {
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

브라우저 지원:

• align-self: flex-start는 -webkit- 접두사가 필요한 Safari를 제외한 모든 주요 브라우저에서 지원됩니다.

  .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: flex-start;
  }

이 수정 사항을 구현함으로써 개발자는 위치를 보장할 수 있습니다. 고정 요소는 Flexbox 내에서 의도한 대로 작동합니다. 컨테이너.