How do I make a flexbox switch to column mode when there isn't enough room for row mode?
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/