Skip to content

Instantly share code, notes, and snippets.

@irae
Last active December 29, 2015 02:49
Show Gist options
  • Save irae/7603193 to your computer and use it in GitHub Desktop.
Save irae/7603193 to your computer and use it in GitHub Desktop.
It's not possible to make a proper flex box / flex wrap polyfill, but this one solves one particular problem.
(function(global){
'use strict';
function flexFix() {
var list = document.querySelector('.flexFix');
if (!list) { return ;}
var items = list.children;
if (!items.length) { return ;}
var newContainer;
var perLine = 4;
var stopper = items.length % perLine + 1;
while (items.length > stopper) {
if(!newContainer || newContainer.children.length === perLine) {
newContainer = document.createElement(list.tagName);
newContainer.className = list.className;
list.parentNode.insertBefore(newContainer, list);
}
newContainer.appendChild(items[0]);
}
}
/* global Modernizr */
if (Modernizr && Modernizr.flexbox === false) {
global.addEventListener('DOMContentLoaded', flexFix, false);
}
})(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment