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

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

flexbox 元素的 align-items 的默认值是 stretch(参见 MDN Docs)。这意味着 .view 元素的大小会增加以填满整个高度，这意味着它永远不会有机会“卡住”。这可以通过使用 align-self: flex start 或通过显式设置高度来解决，例如高度:100px。

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

希望这对您有所帮助。