Is CSS flexbox really suited for building interfaces?
QuHno last edited by
The flexbox specification: [url=http://www.w3.org/TR/css-flexbox-1/]www.w3.org/TR/css-flexbox-1/[/url] (last call was in April 2014, so it can be considered stable) All compatibility issues aside, it is safe to use flexbox if you don't have to support older browsers because you want to build e.g an "App" or and extension for a browser that supports it, simply because they wouldn't work with another browsers anyway. So I decided to give flexbox a spin to solve a design problem that nags me since years, a tabbed interface with a variable height header above the tabs and tab content that takes up the rest of the available space and displays scrollbars if the content does not fit. The result should look like this: [attachment=217]screenshot2.png[/attachment] 3 basic elements with "flex-direction: column", one of them containing elements with "flex-direction: row". The upper info region (green arrows) should take all the place it needs without adding its own scrollbars, meaning it should adapt its height to the content. The region containing the tabs for switching should flow horizontally and never show vertical scrollbars and the tab-content region should take the available space below the tabs up to the bottom of the window (viewport) and display scrollbars at its side as soon as the content does not fit. Is there a way to make flex boxes that adaptable? Somehow it does not seem to be possible to achieve this without scripting. May be Tab Atkins was right when he wrote "[url=http://www.xanthir.com/blog/b4580]Why Flexboxes Aren't Good for Page Layout[/url]" - but for different reasons. Are there viable alternatives apart from scripting? What do you think about it? Attachments: [img]https://forum.vivaldi.net/uploads/attachments/310/screenshot2.png[/img]
Dasrakel last edited by
Sorry for digging up this old thread, I just came across this today. Never having used flexbox before, I took this as a challenge.
It seems to work correctly. Maybe you were using it wrong? ;)
QuHno last edited by
Thank you for the example, I'll look if I can adapt it to my use case as soon as some other problems are solved. I hope I can adapt it to the tabbed interface …