Flexbox 陷阱:Position: Sticky 元素行为不可预测
开发人员在 Flexbox 容器中使用position: Sticky 时经常会遇到意外行为。默认情况下,flexbox 元素会拉伸以填充可用空间,从而导致所有元素的高度相等,这会阻止滚动并使粘性元素变得不起作用。
解决方案在于修改粘性元素的align-self 属性到 flex-start,将其高度重置为 auto。这可以实现滚动并允许粘性元素粘附到其预期位置。
示例:
在以下代码中,粘性元素在对齐之前无法正常运行 - 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,除了 Safari,它需要 -webkit- 前缀:
.sticky { position: -webkit-sticky; position: sticky; top: 0; align-self: flex-start; }
通过实施此修复,开发人员可以确保 position: Sticky 元素在 Flexbox 容器中按预期运行。
以上是为什么我的粘性元素在 Flexbox 容器中不起作用?的详细内容。更多信息请关注PHP中文网其他相关文章!