13

Are there some problems that prevent people from creating it? Is it too complicated?

Maybe there is just no need for that?

Was it created it already and I just can't find it?

I imagine it to be a js based library and work this way:

  1. It checks if the browser supports flexbox natively;

  2. If it doesn't, it parses CSS and checks if an element has flexbox related rules;

  3. If it does, it tries to emulate these rules via javascript by calculating all positions and sizes of the children elements and position them using position: absolute;.

Basically, the same thing that Masonry and similar libraries do, but with flexbox rules. Would that be possible to do?

Edit: this question doesn't explain why it can't be done.

Victor Marchuk
  • 13,045
  • 12
  • 43
  • 67
  • 2
    Possible duplicate of [Is there any polyfill for current CSS Flexible Box Layout Module as per W3C CR (display: flex etc.)?](http://stackoverflow.com/questions/13934654/is-there-any-polyfill-for-current-css-flexible-box-layout-module-as-per-w3c-cr) – Michael Benjamin Nov 28 '15 at 18:03

2 Answers2

10

There is actually a library that does exactly what I wanted: https://github.com/jonathantneal/flexibility

It's in the very early phase of development, but hopefully it will be viable soon.

Suzanne Soy
  • 3,027
  • 6
  • 38
  • 56
Victor Marchuk
  • 13,045
  • 12
  • 43
  • 67
  • Are you sure? You can find this on their GitHub page: “To start using Flexbox in Internet Explorer 8 & 9 or any older browser, download the flexibility.js script and include it anywhere on your page.” – gnclmorais Oct 27 '17 at 16:33
  • latest version (2.x) doesn't work with ie9. I think the 1.x version does work – jlee Feb 20 '18 at 21:07
-1

"emulate these rules via javascript" is the "most impossible" part.

  1. flex box is purely position:static thing, you cannot move it on position:absolute layer (there are too many things behind this);
  2. flex box calculations are made on so called rendering tree that is not available to JS;

In order JS to be used for static layout purposes browsers should have a mechanism to hook up users code to rendering tree formation and layout:

div { layout: myFlexManager url(my-layouts.js); }

But as soon as browsers will have such a facility the flexbox will be thrown away as this is the worst and ugliest CSS spec ever produced - community will come up with something better - simpler and more practical.

c-smile
  • 26,734
  • 7
  • 59
  • 86
  • Could you please explain what exactly will go wrong if I tried to implement flex box calculations in real time from JS? There are polyfills for older version of flex box specs, if they could do it a few years ago, why can't it be done now? – Victor Marchuk Nov 28 '15 at 18:27
  • Some very rough simulation can be made, yes. But as you know these attempts are not that popular. For many reasons. One of the reasons is that people already use CSS-only emulations of these features: grid systems, display:table-cell, etc. Note: these are pure CSS simulations that do not require any JS to be run. – c-smile Nov 28 '15 at 18:54
  • @c-smile can you give an example / jsfiddle where position absolute doesn't work with flexbox? I believe that `position: absolute` has its own characteristics which don't obey flexbox... and not necessarily required either – Aamir Shahzad Jul 13 '17 at 08:17
  • https://stackoverflow.com/questions/41033245/does-position-absolute-conflict-with-flexbox – Aamir Shahzad Jul 13 '17 at 08:32
  • Why flexbox is the "worst and ugliest" spec ever made? – Machado Jul 25 '17 at 19:15
  • 1
    @Machado Because it breaks box model established in CSS 2.1 When you say `width:100px` it does not mean that element will be 100px wide when you use flexbox on it. Flexibility should be defined by flex *units* and not a property, so `width:*;` and yet `margin-left:2*; width:1*` if you want margin to be flexible. – c-smile Jul 26 '17 at 00:19