Hi Gareth - yes the flexbox does make all the rtl block manipulation redundant, you simply change the flex direction. One line of css (plus the prefixed fallbacks) and its done. But it also renders all the logic for the ordering of columns and whther they are there or not and filling the remaining space redundant as well, because you can just set the order of the columns and their proportional sizes, or what proportions of extra space they expand into. It really is a powerful tool for layouts.
At its very simplest, you just create the header, the main content, the two? sidebars and the footer and you let the flexbox css deal with everything from the order to the rtl/ltr to the responsiveness. Unfortunately its not that simple (what is!? ) because even in the browsers that do support flexbox there is variation - such as FF not supporting the flex-wrap so you still have to separate out the header and footer and use @media and flex-direction to deal with various bits of it.
There are a few good tutorials out there, but you do have to be a bit careful because of the fact that its changed a few times, so there's a few different versions out there, including the prefixes and the mishmash that is IE support. The tool Ive tended to use most has been http://the-echoplex.net/flexyboxes/ but there's a few others around as well
The main problem...
Older browsers don't support it - even with some of the vendor prefixes and those fallbacks its not complete - and there's no working polyfill for it at this stage (there was one for an older version of the flexbox layout, but not for the newest RC).
My current aim is to get rid of the browser sniffing Ive got in there and replace it with modernizr.js, but I cant seem to get it to work By my reckoning, its there in the html if I view page source and its listed in sources and I can see the contents of it using Chrome developer tools (the Javascript console). According to my reading - Ive added the no-js class to html and the modernizr script should be replacing that with the various classes from its testing, allowing me to remove the browser sniffing and the extra wrapper div Im using right now.
Implementing js is one of the things Im trying to learn as I build this theme, so any pointers as to why its not working would be welcome I presume Im missing something from what I've read and what Ive looked at in other themes - I just cant see what at the moment.
As for the docking - Its a tool I'm really hoping to get in there before this theme goes out anywhere, but at the moment Ive been concentrating on the fallbacks for the flexbox main layout.
in terms of the display:none issue - yes if you override the layout with a later display rule such as display:none, then the other items will expand to fill the space of the disappearing item (just checked by using firebug and adding a display:none to one of the sidebar columns - it disappeared and everything else filled the space).
I really do like the flexbox model and it is so powerful and easy to use. If I can just get passed the issue of supporting things like IE8 on XP then I would be happy to use it - All the other browsers are free to download and upgrade - and yes I know IE is too, but you cant go beyond 8 on XP machines and despite XP being end of life soon there are many companies and institutions that still use it and who dont allow alternative browsers. A very shortsighted view in my opinion, but its there! I've even been told of one instance of an institution that is upgrading to Win7, but not going beyond IE9 because its taken them so long to roll that out they dont want to start again rolling out another higher version!!!
R