Pourquoi mon élément Sticky ne fonctionne-t-il pas dans un conteneur Flexbox ?

Flexbox Gotcha : Position : l'élément collant se comporte de manière imprévisible

Les développeurs rencontrent souvent un comportement inattendu lorsqu'ils utilisent position : sticky dans un conteneur flexbox. Par défaut, les éléments flexbox s'étirent pour remplir l'espace disponible, ce qui donne des hauteurs égales pour tous les éléments, ce qui empêche le défilement et rend l'élément collant non fonctionnel.

La solution réside dans la modification de la propriété align-self de l'élément collant. à flex-start, qui réinitialise sa hauteur sur auto. Cela permet le défilement et permet à l'élément collant d'adhérer à sa position prévue.

Exemple :

Dans le code suivant, l'élément collant ne fonctionnait pas correctement jusqu'à l'alignement. self : flex-start a été ajouté :

<div>

.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;
}
.sticky {
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

Navigateur Support :

• align-self : flex-start est pris en charge dans tous les principaux navigateurs, à l'exception de Safari, qui nécessite le préfixe -webkit- :

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

En implémentant ce correctif, les développeurs peuvent garantir que les éléments collants se comportent comme prévu dans les conteneurs flexbox.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!