Is Flexbox not mature for a grid

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.

I don't think flex is 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.

IE 11 requires a unit to be added to the third argument, the flex-basis property
In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property
IE 11 does not vertically align items correctly when min-height is used

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)

In any case it seems like the wrong decision that I chose flexbox in the first case, I might have to rewrite that whole part into floating divs.

Nothing sucks more than feeling a project is never ending because of these things :-)

@maruru sorry, I forgot to to the @thing but yeah of course, it is for him to decide. I did a little research about it 'cause in my work they were not happy at all about using flexbox to do the tricks and using bootstrap I had to put to the container a lot of classes and then add some extra css to to the trick and tweaks for it to make it act like a flexbox, it was way more time consuming than just doing a simple tweak for older versions. Also in our company giving support everything older than IE 10 is kind of useless, does not represent any kind of sales (I work at a publicity company) so it is of not use for us and easier and faster to do little tweaks.

@roganoalien I guess, what you say depends on the situation. I have made the exact opposite experience, but I did not use any CSS framework - only good old plain CSS (VanillaCSS(tm)).

Thread

Is Flexbox not mature for a grid

Responses(1)

Recent threads

Search Hashnode

Is Flexbox not mature for a grid

Responses(1)

Recent threads