Éléments collants et Flexbox : un Gotcha

Positionnement collant, utilisé pour les éléments qui restent fixes à des positions spécifiées lors du défilement, se comporte de manière inattendue lorsqu'il est utilisé avec des conteneurs flexbox. Ce problème survient lorsque les éléments flexbox s'étirent par défaut, ce qui donne des éléments avec des hauteurs cohérentes sur lesquelles il est impossible de faire défiler.

Pour résoudre ce problème, ajoutez align-self: flex-start à l'élément collant. Cet attribut définit la hauteur de l'élément sur auto, permettant le défilement et la résolution du problème de positionnement.

Il est important de noter que la prise en charge par le navigateur pour la position : les tableaux collants varie. Safari nécessite le préfixe -webkit-, tandis que Firefox rencontre actuellement des problèmes.

Voici un extrait de code ajusté pour référence :

.flexbox-wrapper {<br> display: flex; <br> débordement : auto ;<br> hauteur : 200px ;          /<em> Pas nécessaire -- par exemple seulement </em>/<br>}<br>.regular {<br> background-color: blue; /<em> Pas nécessaire -- par exemple seulement </em>/<br> hauteur : 600 px ;          /<em> Pas nécessaire -- par exemple seulement </em>/<br>}<br>.sticky {<br> position : -webkit-sticky; /<em> pour Safari </em>/<br> position : collant;<br> top : 0;<br> align-self : flex-start ; /<em> <-- c'est le correctif </em>/<br> background-color: red;  /<em> Pas nécessaire -- par exemple seulement </em>/<br>}<br>

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!