It's possible to take flexbox to an extend to use it for a grid system. I assume Flexbox is intended to make the overall layout and not a box grid, where display: grid is gonna tackle this in the future.
However I tried to create a grid upon flexbox and I feel I have failed hard on it. It's just that it would be so easy maintainable if it worked. It works wonder in Chrome and Firefox but of course, when switching to Internet Explorer, Microsoft has defined custom standards so no longer does it work.
My issue now is that I want all boxes on a line to be relative equal with according to grow ratio, but Internet Explorer collapse everything to narrow stuff when I add flex-basis: 0.
I'm currently close to call if off and rewrite the grid system into traditional <div> with a float: left approach. Similar to Bootstrap 3.
Do you recommend me to do this or should I keep on spending (wasting?) time to make it work with flexbox and is it even possible to make Internet Explorer (11) behave properly with a flexbox layout.
Alternatively I make a cusomized CSS ruleset for Internet Explorer, but I generally don't like this approach as it's a n+1 problem on the maintaining time.
Software Engineer, Technical Consultant & Mentor
Marco Alka
I don't think
flexis a good idea if you still have to support IE: http://caniuse.com/#search=flex . It seems to have a number of issues and needs a few workarounds. Imho, flex is quite practical if you do not care for IE any more and instead do what @leaverou said in here AMA: Only support the last two versions and no IE. Of course, for customers or in the industry that rule might not be applicable.And IE will no longer receive updates fixing those problems, as fixes might break existing websites and there will never be new IE version any more (we have Edge now, so that makes sense)