html - 当没有足够的空间用于行模式时，如何使 flexbox 切换到列模式？

Question

我有一个像这样的 flexbox:

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

但我希望它这样做:

换句话说，当 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
}

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