css, flex-direction, 粘性元素

Question

我正在使用 flex 和两种模式来改变 flex-direction:

@mixin for-medium-up {
@media (min-width: 670px) { @content; }
}
@mixin for-large-up {
@media (min-width: 880px) { @content; }
}

在第一种模式下（最小宽度：880px），我想在右侧有一个粘性元素，如下所示：

粘性元素定义如下：

.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
}

在第二种模式下（最小宽度：670px），我想要这样：

粘性元素在第一种模式下是粘性的，在第二种模式下不粘性。

这里是 Demo

Answer 1

答案并不像将某些东西附加到父元素那么简单。

我已经修改了您的演示并为清晰起见做了一些简化，但我相信它实现了您的预期目标。

Modified Demo

考虑元素并排的情况...

弹性框项目 align-items 的默认值为 stretch（参见 MDN Docs）。这意味着 .view 元素的大小会增加以填满整个高度，这意味着它永远没有机会变成 "stuck"。这可以通过使用 align-self: flex start 或明确设置高度来解决，例如height: 100px.

如果您取消注释第 10 行并注释掉第 11 行，您就会看到问题。

希望对您有所帮助。

css, flex-direction, 粘性元素

css, flex-direction, sticky element

css

sticky

flexbox