Flextable – flexbox with css tables fallback

[ksmets]

Hello all,

as a lot of you, I’m creating my own “grid” system, great, another one… But please read on, my main issue is only this: no absolute positioning in tables in Firefox.. great.

Apparently there’s a 13 year old bug for this on bugzilla (https://bugzilla.mozilla.org/show_bug.cgi?id=35168 “bugzilla”). Mozilla doesn’t want or doesn’t bother to fix it, I’ve no idea which it is. Either way, I need absolutely positioned (pseudo-) elements in my tables.

So something I was thinking of was, hey, flexbox is supported in FF 22+ so that’s great, it supports relative position on the container properly so that’s just what I need. Plus, I can fall back to tables for every other browser which doesn’t support display: flex;. I don’t even want display: -webkit-flex, for some reason Safari really trips on it (but that may be because my knowledge of flexbox is currently a bit limited).

Anyhow, long story short, my flextable can be found here:

http://codepen.io/kevinsmets/pen/AmDzh

I’m quite happy with the result, tested it in almost every major browser and it looks good. I’m just wondering, maybe others have already tackled this particular problem, and have a better solution. Or maybe you can give me some feedback on this, either way any constructive criticism is highly appreciated!

Pro:

• no extra html, yay!
• works in every browser afaik

Con:

• no flex-wrap until FF 28, the current Aurora / Nightly, but it’s not needed for my use-case

I can pinpoint it a bit more with @supports maybe, but I don’t think it’s needed at the moment. It would however be a bit cleaner than mixing the display properties for the same elements…

[Author]

Posts