当行模式没有足够的空间时，如何将flexbox切换到列模式？

Question

我有一个像这样的弹箱：

当容器太窄时，它会像这样包裹：

但我希望它能做到这一点：

换句话说，当flexbox包装时，我希望它能一次包装所有内容。它完全水平或完全垂直。

flexbox元素的大小都不一定。

可以吗？

Answer 1

最简单的方法是使用媒体查询。

将min-width设置为您的父元素（或事先检查）和匹配的媒体查询，将flex-direction更改为column

@media screen and (max-width: 500px) {
  .classname {
    flex-direction: column;
  }
}

旁注

如果你想深入研究脚本，请调整大小和加载事件，检查这样的滚动条，你还有另一种改变风格的方法。

因此，如果没有为你的行设置换行，它会在某些时候创建一个滚动条，如果页面在加载时缩小或者用户调整大小。

//Horizontal Scrollbar
(function($) {
    $.fn.hasHorizontalScrollBar = function() {
        return this.get(0) ? this.get(0).scrollWidth > this.innerWidth() : false;
    }
})(jQuery);

//Vertical Scrollbar
(function($) {
    $.fn.hasVerticalScrollBar = function() {
        return this.get(0) ? this.get(0).scrollHeight > this.innerheight() : false;
    }
})(jQuery);


//use it like this
if($("#element").hasVerticalScrollbar()){
    //do whatever you'd like to
}

Src：https://hasin.me/2013/08/17/detecting-if-a-dom-element-has-scrollbar/

Answer 2

您需要检测元素被推送到第二行然后将容器更改为：flex-direction: column的时刻。

一个选项是比较窗口大小调整前后的包装器div高度 - 在resize事件中。但这不适用于初始页面加载。

另一种方法是在初始加载时检查容器高度是否>> 2 *项目高度。