How do I make a flexbox switch to column mode when there isn't enough room for row mode?

Question

I have a flexbox like this:

When the container is too narrow, it wraps like this:

But I want it to do this:

In other words, when the flexbox wraps, I want it to wrap everything at once. It's either completely horizontal or completely vertical.

The flexbox elements aren't all necessarily the same size.

Can it be done?

Answer 1

Simplest way is to use a media query (or a script is needed).

Set a min-width to your parent element (or check before hand) and a matching media query, which change flex-direction to column

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

---

Side note

If you do want to dig into scripting for this, an eventlistener on resize and load, checking for a scrollbar like this, and you have another way to change your style.

So by not setting wrap to your row, it will at some point create a scrollbar, either if page is to narrow on load or if user resize.

//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/