私の Sticky 要素が Flexbox コンテナーで機能しないのはなぜですか?

フレックスボックスの落とし穴: Position: Sticky 要素が予期しない動作をする

開発者は、フレックスボックス コンテナ内で Position: Sticky を使用するときに予期しない動作に遭遇することがよくあります。デフォルトでは、フレックスボックス要素は利用可能なスペースを埋めるように引き伸ばされるため、すべての要素の高さが同じになり、スクロールできなくなり、スティッキー要素が機能しなくなります。

解決策は、スティッキー要素の align-self プロパティを変更することです。 flex-start に設定すると、高さが自動にリセットされます。これにより、スクロールが可能になり、スティッキー要素が意図した位置に固定されるようになります。

例:

次のコードでは、スティッキー要素は align- まで正しく機能していませんでした。 self: flex-start が追加されました:

<div>

.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;
  }

この修正を実装することで、開発者は位置: スティッキー要素がフレックスボックス内で意図したとおりに動作することを保証できます。コンテナ。

以上が私の Sticky 要素が Flexbox コンテナーで機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。