8 ms·

Solved By Flexbox – Cleaner, hack-free CSS

259 points by philipwalton 13y ago

jafaku 13y ago
This site is unreadable for me.
- roryokane 13y ago
  At the top of the site, you should see a red banner saying “Your browser does not support Flexbox. Parts of this site may not appear as expected.” But it’s easy to overlook. Ironically, the banner is easy to overlook because the broken styles make the banner the same width as the rest of the page, making it blend in. The styles are so broken you don’t even see the warning message about the styles being broken. Open the site in Chrome and it should look normal.
  - jafaku 13y ago
    I'm talking about the typography. It's very thin and light.
erichurkman 13y ago
I'm quite happy with the modern flexbox syntax. I did a lot of work with XUL and xulrunner years ago - it was slick having things automatically flow into place, but the syntax (and syntax of the derivative box-flex CSS properties), but it seemed to require very heavy markup to get things "right". Flexie [1] appears to provide a polyfill version of flexbox. Has anyone used it in a major production site? What was your experience? There were a few polyfill-type projects for the older syntax, but I never got them to work very well for anything but the most basic layouts. [1] http://flexiejs.com/ http://flexiejs.com/
- philipwalton 13y ago
  Flexie provides a polyfill for the outdated syntax `display:box`. The library's creator (@doctyper) is working on a new polyfill for the new syntax `display:flex`, but as far as I know it's still in development. https://github.com/doctyper/reflexie https://github.com/doctyper/reflexie
mikeknoop 13y ago
I wish there was a JS-shim that could be used to deliver flexbox (or any cutting edge CSS) to older browsers so I could begin implementing it now instead of waiting some unspecified amount of time before it becomes acceptable.
- philipwalton 13y ago
  This is in development: https://github.com/doctyper/reflexie https://github.com/doctyper/reflexie
  - christiangenco 13y ago
    https://github.com/doctyper/reflexie/tree/develop https://github.com/doctyper/reflexie/tree/develop for actual content.
SnowLprd 13y ago
"Feel free to open an issue or submit pull request on Github." Why does the link to the project on GitHub open in a new browser tab? Is there some reason this behavior is foisted on folks who would rather have the content open in the same tab? (Spoiler alert: I'm one of those folks.) And, now that I take a closer look, it seems that every non-internal link on the page behaves the same way, spawning new tabs willy-nilly. Looks like a useful project. I'm just legitimately curious why people do this.
- fahdsyed 13y ago
  In hopes that when you close that new tab you will return to their site and spend more time taking a second look. That increases the likelihood of you trying their product and boosts page visitation time in analytics.
  - SnowLprd 13y ago
    I'm aware that the malodorous motive you mentioned is often the reason behind this user-hostile behavior. I was hoping that wasn't the case here, and instead perhaps some cog in the publishing process was spuriously doing this automatically. Naïve of me, perhaps.
- philipwalton 13y ago
  Great question. I use Google Analytics to track where users are clicking, specifically, when users click on external links that aren't otherwise tracked by the GA tracking code. The problem is that if you click on a link that opens a new page, the functionality in the click handler may or may not run depending on how long it takes to redirect the request. That means that if I'm tracking clicks, I very well may be losing a good deal of data. The alternative is to hijack the click event, wait for say 100ms, and then load the new page via JavaScript, but that also break the open in a new tab functionality. In other words, there are no good options to track external click events via Google Analytics and still give users complete control over where the links go. The best option I could come up with is to always open external links in a new tab, because that way the click handling code always has time to run. If you're curious as to what I'm doing, here is the code: https://github.com/philipwalton/solved-by-flexbox/blob/master/scripts/track-events.js https://github.com/philipwalton/solved-by-flexbox/blob/maste... Anyway, it has nothing to do with wanting users to stay on my site. But I can't speak for why other people do this.
hpaavola 13y ago
Flexbox (or something similar) should have been the first thing to go into CSS spec. Colors, fonts, margins and what-not are way less important than the ability to align elements. Alignin things vertically is still brainded, but at least now it's possible. Instead of setting properties for the parent element, we should be able to just say .vertically-and-horizontally-centered {align: center center;} and be done with it.
- chii 13y ago
  The issue with css is it conflates two very separate concerns - one of styling, and one of layout. Sure, both are presentation related, but they are differently related. CSS used to work well for styling, and is terrible for layout. I hope flexbox is the silver bullet - it seems to be tho, so my fingers are crossed.
  - kamjam 13y ago
    Agree. It just should have happened a LONG time ago, these issues have bene present for a very long time and even since the beginning, the hack was to use <tables> for layouts
- dools 13y ago
  You can solve the vertical alignment problem pretty easily using display:inline-block
  - hpaavola 13y ago
    Not easily. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Foo</title> <style> html {height: 100%;} body {height: 100%;} .mid {display: inline-block; vertical-align: middle;} /*body:before {content: ''; height: 100%; display: inline-block; vertical-align: middle;}*/ </style> </head> <body> <div class="mid">vertically aligned</div> </body> </html> would be easily, but you need to uncomment that last rule before it "works", and that is just ugly. And when that last rule is uncommented, viewport now has scrollbar for some reason that I did not have motivation to investigate. Like chii said, that's because CSS is a language for styling, not for layouts.
ethana 13y ago
I'm not sure why this is such a big problem. The grid usage for flex just really remind me of the early days where everyone used table,td,tr for layout. You can just set the width/height with percentage and everything would scale. The only thing is that it not wrap-able like with div blocks, but that's what div was invented for.
- jared314 13y ago
  It still burns that HTML Tables had this simple layout issue almost solved. CSS v1 could have just codified that behavior, and worked on improving it later. This is just emphasized by the "holy grail" example of the 3 column layout. That is a decade of lost productivity thanks to the people who said "tables for layout is stupid"[1]. It is too bad that GiveUpAndUseTables[2] is no longer working, because I would still send it to people. [1] http://www.hotdesign.com/seybold/everything.html http://www.hotdesign.com/seybold/everything.html [2] http://giveupandusetables.com/ http://giveupandusetables.com/
  - andyhmltn 13y ago
    I never actually saw that giveupandusetables website but found this: http://ajaxian.com/wp-content/images/giveupandusetables.png http://ajaxian.com/wp-content/images/giveupandusetables.png Is that the page?
    - jared314 13y ago
      Yes. The timer was set to 47 mins for you to attempt your pure CSS layout, and would count down to your inevitable failure. Someone also built an opposing "Use CSS" timer, but I cannot find that one.
  - ubernostrum 13y ago
    The thing that's less often remembered is that tables had their own, completely different set of quirks which had to be learned and worked around, such that people eventually internalized all of it and figured that since they were no longer conscious of the problems, there must not be any and so "tables are so much easier".
straws 13y ago
This is a very nice resource — the use of Autoprefixer and the SUIT/Montage class names is welcome as well. I see a lot of impact in flexbox for progressively enhanced designs — designs that in their most basic form have simplified or single-column layouts — where most of the layout is handled by supported browsers. Do you imagine it's better to make a clean break and just depend on pollyfills/float-base `.no-flex` backup styles though?
bowlofpetunias 13y ago
I'm not a front-end guy, hell, I'm barely even a developer these days. This could be the best thing for CSS ever and I wouldn't be able to recognize it, so I'm not dissing the authors. But I have to ask: isn't any "solution" that requires IE 11+ practically useless to the point of being fictional for at least the next decade?
- philipwalton 13y ago
  It's actually not as bad as you think. IE updates are now being released as critical so they're being included in OS updates. That means that most IE users will be upgrading to the latest IE of whatever OS they're using. So when Window XP is officially abandoned (scheduled for spring 2014), it won't be long until most IE users are on the latest version.
  - cmircea 13y ago
    Vista tops out at 9. You may or may not care.
    - andybak 13y ago
      And thus MS snatches defeat from the jaws of victory once more. Locking browser upgrades to OS upgrades without huge a technical justification. With XP maybe there was a case that it was too hard to support all the changes needed but Vista to Windows 7/8? This was a business decision not a technical one. At least Vista uptake was relatively small.
      - camus 13y ago
        "huge a technical justification" There is 0 technical justification, just some exec decision. Thanks to that and crappy XP security (by design , there is no other word), you have these huge botnets that will be here for years. Companies need to understand that XP , and IE on XP is a threat to their business, their data and using Microsoft products will damage them sooner or later, and i'm not even talking about MSFT racketeering ,sorry license policy.
sirbrad 13y ago
This is great work
TuringTest 13y ago
Unfortunately, the Holy Grail layout works like crap in mobile. In the most recent Chrome and Firefox for Android, the pinch-to-zoom gesture either doesn't work at all, or the whole div is resized as an image without text reflow (i.e. cropping text lines to the left and right). Also there seems to be a forced minimum width, under which the web pace can't be made smaller; this is awful for navigating long pages, or when the default font size is too big. Changing the phone orientation does reflow the text, so I assume that the problem is with how these browsers resize the web page under pinch-and-zoom in a way that the CSS doesn't detect. The funny thing is that the same browsers on desktop work like a breeze when resizing text with the wheelmouse, or resizing the window. Why does it not work the same on the phone? The worst thing is that the layout seems to be spreading like fire. I'm forced to read most major modern websites at fixed font size.
- andybak 13y ago
  According to http://caniuse.com/flexbox http://caniuse.com/flexbox Firefox on Android still needs a prefix. Testing in Chrome 29 - pinch to zoom is disabled but are you sure that's not a deliberate choice in this specific case rather than a flaw with flexbox?
  - TuringTest 13y ago
    I don't know if it's a flaw with flexbox, but with the way sites are adopting it. The recommended layout from A list apart and Solved by flexbox both exhibit these problems, as well as multiple mainstream news sites.
- roryokane 13y ago
  Resizing-as-image rather than resizing-as-text is how mobile browsers have always worked. At least, ever since the iPhone, which the other OSs copied the browser model of. The zoom behavior you are describing happens on every page in those browsers, and has nothing to do with flexbox or the holy grail layout. If you want to change text size without cropping text, in Chrome for Android, go to Settings > Accessibility and drag the “Text scaling” slider. And in Firefox for Android, go to Settings and open “Text size”. It’s not as convenient as pinch-to-zoom, but it’s worth adjusting that slider for the current page if you’ll be reading it for a while.
jwarren 13y ago
Flexbox is brilliant in theory but the support is so poor that it's still basically unusable in production. Pity, because it would make like much easier.
jimmcslim 13y ago
Probably worth mentioning that there is also the CSS Grid Layout Module [1], which has (according to Can I use...) much less support (9.65% [2]) vs Flexbox (79.32% [3]). A quick survey suggests that Flexbox should be used 'in the small' whilst grid is for 'in the large', but Solved by Flexbox seems to suggest that it is equally competent as a solution for whole page grid layout. Is the CSS Grid Layout module a dead end? [1] http://www.w3.org/TR/2013/WD-css3-grid-layout-20130910/ http://www.w3.org/TR/2013/WD-css3-grid-layout-20130910/ [2] http://caniuse.com/#search=grid http://caniuse.com/#search=grid [3] http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox
- philipwalton 13y ago
  CSS Grid Layout is definitely not a dead end, it just didn't have enough support to showcase (yet). As for the difference, Flexbox is for one-dimensional layout and Grids are for two-dimensional layout. Grids will eventually be able to do what you now need a flexbox within a flexbox to do, and much more. They'll be especially helpful for layouts that need to be dramatically different across media breakpoints. Hope that helps!
NKCSS 13y ago
Cool, very cool, but the whole IE11+ thing just makes me not wanting to use this. Let's hope for a js shim, because it feels very nice and clean.
bhauer 13y ago
This is awesome. Very much appreciated and I look forward to more adoption of IE 11 on Windows so that this can be put to better widespread use. One nit, though: would you be able to restructure the examples to avoid use of the !important CSS directive? Seeing that made me cringe.
- philipwalton 13y ago
  There's absolutely nothing wrong with `!important` if used correctly. The problem is when people use `!important` because they don't understand CSS specificity.
  - bhauer 13y ago
    Well, true. But all scenarios should be solvable via specificity alone. I feel this is similar to saying there's absolutely nothing wrong with Goto if used correctly. The problem is when people use Goto because they don't understand other structural mechanisms. As I said, it's just a nit that they can consider it or ignore it as they please. If this were just some web page, I would never even care. But since they encouraged me to open my DOM inspector and look at the code, I wanted them to know that I cringed when I saw the !important. That's it.
    - philipwalton 13y ago
      I disagree. In classes that are supposed to be global helpers/modifiers, it makes absolute sense to use `!important`. For example, if I have the utility class `.u-hidden`, that selector has very low specificity. But if want to be damn sure that anything I put that class on gets hidden. There's no way to use specificity in this case because it's generalized for use on any website. This is a common pattern seen in most well architected CSS libraries today. BTW, I am the they you were referring to :)
      - bhauer 13y ago
        Well, in that case, I retract the comment. The work you've done in demonstrating Flexbox is too valuable to suffer pedantic and (as you point out, ultimately not even necessary) points about !important. Thanks again for the work!
caiob 13y ago
Nice proof of concept.
jgon 13y ago
I am excited by the prospects of flexbox, but disappointed by it as well. Maybe someone can correct me here, but when I started using flexbox it seemed to me like another case of the W3C being a day late and a dollar short. I mean, something like flexbox should have been the very first thing added to CSS, but here we are in 2013 and we can maybe, sort of use it, as long as we don't care about a vast number of people using IE. But even then, let's say you want to do something like have a resizable canvas or WebGL context. You know, like you can get with absolutely any other application toolkit. Now maybe I totally missed how to do this in my hours and hours of frustration, and if so the person who corrects me will have my undying gratitude. But how was it that the first thing I thought to do was to see if I can have a resizable canvas with other elements controls (ie a drawing application, or something else), and yet this sort of thing did not occur to the W3C in the years they spent working on the spec. Do those people develop applications or is it all just about creating documents that are slightly dynamic? And so now I'll probably have to wait until 2020 and the flexbox spec revision or something else until I can have contexts to draw to that will resize to fit their container, without going through all sorts of contortions to manually size then. Progress, ladies and gentlemen. Progress.
e12e 13y ago
While this does make a few things that are already reasonably possible in css easier, I'd much rather see adoption of: http://dev.w3.org/csswg/css-regions/ http://dev.w3.org/csswg/css-regions/ That would be a pretty major departure from how layout works now, but is IMNHO better than the half-working "css columns" stuff we have now (not to mention the mess that is fload, absolute vs fixed positioning etc). And it's based on a lot of earlier work from layout in the DTP world - in a good way. It makes sense -- if you want to do "fancy" layout in the browser at all. And since modern browsers can't really display text properly (say, do some basic hyphenation) -- we're pretty much forced to do layout via css -- even if all we want do to is present some text for reading. It's beyond me why no browser will render a page like: <html> <h1>A heading</h1> <p>A paragraph or two</p> <h2>Maybe a subhead</h2> <p> ... </p> </html> In a way that's actually pleasant to read. I'd even accept going back to the horrible standard rendering if any css was included -- just do the right thing by default. (Actually, a small enough tablet does a better job than most desktop browsers, but that is purely by accident -- and they still have pretty awful default colours (white on black -- too high contrast) -- and are much too hard to customize reasonably for the average users). edit: As some of the other comments have mentioned, css is ok for styling -- but pretty bad at layout. I'd welcome both these specs -- and maybe a (stronger?) recommendation regarding how to hyphenate/space text (eg. along the lines of how (La)TeX does it).
tripzilch 13y ago
Wow. I dunno how you managed it, but in Opera 12.16 you get THIS: http://i.imgur.com/mGRDWdp.jpg http://i.imgur.com/mGRDWdp.jpg I have never seen this before. At 100% zoom it seems fine, this screenshot is at 150% zoom and after scrolling a few lines. I'm aware that this is probably a browser bug just as much as to blame your CSS. But I have never seen a webpage do this with just CSS! Somehow it doesn't seem to clear the screen buffer anymore, when I clicked the link on HN (not into a new tab) it even shone through the HN frontpage on the background. The previous page. What did you do?? :) (also that sounds like a cross-domain content leak waiting to happen, but that's Opera's problem). It's very contemporary glitch art, with the juxtaposed perspective demo screenshots shining through in the back, beautiful, but not very hack-free ;-)

259 points by philipwalton 13y ago

jafaku 13y ago

This site is unreadable for me.

roryokane 13y ago
At the top of the site, you should see a red banner saying “Your browser does not support Flexbox. Parts of this site may not appear as expected.” But it’s easy to overlook. Ironically, the banner is easy to overlook because the broken styles make the banner the same width as the rest of the page, making it blend in. The styles are so broken you don’t even see the warning message about the styles being broken. Open the site in Chrome and it should look normal.
- jafaku 13y ago
  I'm talking about the typography. It's very thin and light.

erichurkman 13y ago

I'm quite happy with the modern flexbox syntax. I did a lot of work with XUL and xulrunner years ago - it was slick having things automatically flow into place, but the syntax (and syntax of the derivative box-flex CSS properties), but it seemed to require very heavy markup to get things "right". Flexie [1] appears to provide a polyfill version of flexbox. Has anyone used it in a major production site? What was your experience? There were a few polyfill-type projects for the older syntax, but I never got them to work very well for anything but the most basic layouts. [1] http://flexiejs.com/ http://flexiejs.com/

philipwalton 13y ago
Flexie provides a polyfill for the outdated syntax `display:box`. The library's creator (@doctyper) is working on a new polyfill for the new syntax `display:flex`, but as far as I know it's still in development. https://github.com/doctyper/reflexie https://github.com/doctyper/reflexie

mikeknoop 13y ago

I wish there was a JS-shim that could be used to deliver flexbox (or any cutting edge CSS) to older browsers so I could begin implementing it now instead of waiting some unspecified amount of time before it becomes acceptable.

philipwalton 13y ago
This is in development: https://github.com/doctyper/reflexie https://github.com/doctyper/reflexie
- christiangenco 13y ago
  https://github.com/doctyper/reflexie/tree/develop https://github.com/doctyper/reflexie/tree/develop for actual content.

SnowLprd 13y ago

"Feel free to open an issue or submit pull request on Github." Why does the link to the project on GitHub open in a new browser tab? Is there some reason this behavior is foisted on folks who would rather have the content open in the same tab? (Spoiler alert: I'm one of those folks.) And, now that I take a closer look, it seems that every non-internal link on the page behaves the same way, spawning new tabs willy-nilly. Looks like a useful project. I'm just legitimately curious why people do this.

fahdsyed 13y ago
In hopes that when you close that new tab you will return to their site and spend more time taking a second look. That increases the likelihood of you trying their product and boosts page visitation time in analytics.
- SnowLprd 13y ago
  I'm aware that the malodorous motive you mentioned is often the reason behind this user-hostile behavior. I was hoping that wasn't the case here, and instead perhaps some cog in the publishing process was spuriously doing this automatically. Naïve of me, perhaps.
philipwalton 13y ago
Great question. I use Google Analytics to track where users are clicking, specifically, when users click on external links that aren't otherwise tracked by the GA tracking code. The problem is that if you click on a link that opens a new page, the functionality in the click handler may or may not run depending on how long it takes to redirect the request. That means that if I'm tracking clicks, I very well may be losing a good deal of data. The alternative is to hijack the click event, wait for say 100ms, and then load the new page via JavaScript, but that also break the open in a new tab functionality. In other words, there are no good options to track external click events via Google Analytics and still give users complete control over where the links go. The best option I could come up with is to always open external links in a new tab, because that way the click handling code always has time to run. If you're curious as to what I'm doing, here is the code: https://github.com/philipwalton/solved-by-flexbox/blob/master/scripts/track-events.js https://github.com/philipwalton/solved-by-flexbox/blob/maste... Anyway, it has nothing to do with wanting users to stay on my site. But I can't speak for why other people do this.

hpaavola 13y ago

Flexbox (or something similar) should have been the first thing to go into CSS spec. Colors, fonts, margins and what-not are way less important than the ability to align elements. Alignin things vertically is still brainded, but at least now it's possible. Instead of setting properties for the parent element, we should be able to just say .vertically-and-horizontally-centered {align: center center;} and be done with it.

chii 13y ago
The issue with css is it conflates two very separate concerns - one of styling, and one of layout. Sure, both are presentation related, but they are differently related. CSS used to work well for styling, and is terrible for layout. I hope flexbox is the silver bullet - it seems to be tho, so my fingers are crossed.
- kamjam 13y ago
  Agree. It just should have happened a LONG time ago, these issues have bene present for a very long time and even since the beginning, the hack was to use <tables> for layouts
dools 13y ago
You can solve the vertical alignment problem pretty easily using display:inline-block
- hpaavola 13y ago
  Not easily. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Foo</title> <style> html {height: 100%;} body {height: 100%;} .mid {display: inline-block; vertical-align: middle;} /*body:before {content: ''; height: 100%; display: inline-block; vertical-align: middle;}*/ </style> </head> <body> <div class="mid">vertically aligned</div> </body> </html> would be easily, but you need to uncomment that last rule before it "works", and that is just ugly. And when that last rule is uncommented, viewport now has scrollbar for some reason that I did not have motivation to investigate. Like chii said, that's because CSS is a language for styling, not for layouts.

ethana 13y ago

I'm not sure why this is such a big problem. The grid usage for flex just really remind me of the early days where everyone used table,td,tr for layout. You can just set the width/height with percentage and everything would scale. The only thing is that it not wrap-able like with div blocks, but that's what div was invented for.

jared314 13y ago
It still burns that HTML Tables had this simple layout issue almost solved. CSS v1 could have just codified that behavior, and worked on improving it later. This is just emphasized by the "holy grail" example of the 3 column layout. That is a decade of lost productivity thanks to the people who said "tables for layout is stupid"[1]. It is too bad that GiveUpAndUseTables[2] is no longer working, because I would still send it to people. [1] http://www.hotdesign.com/seybold/everything.html http://www.hotdesign.com/seybold/everything.html [2] http://giveupandusetables.com/ http://giveupandusetables.com/
- andyhmltn 13y ago
  I never actually saw that giveupandusetables website but found this: http://ajaxian.com/wp-content/images/giveupandusetables.png http://ajaxian.com/wp-content/images/giveupandusetables.png Is that the page?
  - jared314 13y ago
    Yes. The timer was set to 47 mins for you to attempt your pure CSS layout, and would count down to your inevitable failure. Someone also built an opposing "Use CSS" timer, but I cannot find that one.
- ubernostrum 13y ago
  The thing that's less often remembered is that tables had their own, completely different set of quirks which had to be learned and worked around, such that people eventually internalized all of it and figured that since they were no longer conscious of the problems, there must not be any and so "tables are so much easier".

straws 13y ago

This is a very nice resource — the use of Autoprefixer and the SUIT/Montage class names is welcome as well. I see a lot of impact in flexbox for progressively enhanced designs — designs that in their most basic form have simplified or single-column layouts — where most of the layout is handled by supported browsers. Do you imagine it's better to make a clean break and just depend on pollyfills/float-base `.no-flex` backup styles though?

bowlofpetunias 13y ago

I'm not a front-end guy, hell, I'm barely even a developer these days. This could be the best thing for CSS ever and I wouldn't be able to recognize it, so I'm not dissing the authors. But I have to ask: isn't any "solution" that requires IE 11+ practically useless to the point of being fictional for at least the next decade?

philipwalton 13y ago
It's actually not as bad as you think. IE updates are now being released as critical so they're being included in OS updates. That means that most IE users will be upgrading to the latest IE of whatever OS they're using. So when Window XP is officially abandoned (scheduled for spring 2014), it won't be long until most IE users are on the latest version.
- cmircea 13y ago
  Vista tops out at 9. You may or may not care.
  - andybak 13y ago
    And thus MS snatches defeat from the jaws of victory once more. Locking browser upgrades to OS upgrades without huge a technical justification. With XP maybe there was a case that it was too hard to support all the changes needed but Vista to Windows 7/8? This was a business decision not a technical one. At least Vista uptake was relatively small.
    - camus 13y ago
      "huge a technical justification" There is 0 technical justification, just some exec decision. Thanks to that and crappy XP security (by design , there is no other word), you have these huge botnets that will be here for years. Companies need to understand that XP , and IE on XP is a threat to their business, their data and using Microsoft products will damage them sooner or later, and i'm not even talking about MSFT racketeering ,sorry license policy.

sirbrad 13y ago

This is great work

TuringTest 13y ago

Unfortunately, the Holy Grail layout works like crap in mobile. In the most recent Chrome and Firefox for Android, the pinch-to-zoom gesture either doesn't work at all, or the whole div is resized as an image without text reflow (i.e. cropping text lines to the left and right). Also there seems to be a forced minimum width, under which the web pace can't be made smaller; this is awful for navigating long pages, or when the default font size is too big. Changing the phone orientation does reflow the text, so I assume that the problem is with how these browsers resize the web page under pinch-and-zoom in a way that the CSS doesn't detect. The funny thing is that the same browsers on desktop work like a breeze when resizing text with the wheelmouse, or resizing the window. Why does it not work the same on the phone? The worst thing is that the layout seems to be spreading like fire. I'm forced to read most major modern websites at fixed font size.

andybak 13y ago
According to http://caniuse.com/flexbox http://caniuse.com/flexbox Firefox on Android still needs a prefix. Testing in Chrome 29 - pinch to zoom is disabled but are you sure that's not a deliberate choice in this specific case rather than a flaw with flexbox?
- TuringTest 13y ago
  I don't know if it's a flaw with flexbox, but with the way sites are adopting it. The recommended layout from A list apart and Solved by flexbox both exhibit these problems, as well as multiple mainstream news sites.
roryokane 13y ago
Resizing-as-image rather than resizing-as-text is how mobile browsers have always worked. At least, ever since the iPhone, which the other OSs copied the browser model of. The zoom behavior you are describing happens on every page in those browsers, and has nothing to do with flexbox or the holy grail layout. If you want to change text size without cropping text, in Chrome for Android, go to Settings > Accessibility and drag the “Text scaling” slider. And in Firefox for Android, go to Settings and open “Text size”. It’s not as convenient as pinch-to-zoom, but it’s worth adjusting that slider for the current page if you’ll be reading it for a while.

jwarren 13y ago

Flexbox is brilliant in theory but the support is so poor that it's still basically unusable in production. Pity, because it would make like much easier.

jimmcslim 13y ago

Probably worth mentioning that there is also the CSS Grid Layout Module [1], which has (according to Can I use...) much less support (9.65% [2]) vs Flexbox (79.32% [3]). A quick survey suggests that Flexbox should be used 'in the small' whilst grid is for 'in the large', but Solved by Flexbox seems to suggest that it is equally competent as a solution for whole page grid layout. Is the CSS Grid Layout module a dead end? [1] http://www.w3.org/TR/2013/WD-css3-grid-layout-20130910/ http://www.w3.org/TR/2013/WD-css3-grid-layout-20130910/ [2] http://caniuse.com/#search=grid http://caniuse.com/#search=grid [3] http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox

philipwalton 13y ago
CSS Grid Layout is definitely not a dead end, it just didn't have enough support to showcase (yet). As for the difference, Flexbox is for one-dimensional layout and Grids are for two-dimensional layout. Grids will eventually be able to do what you now need a flexbox within a flexbox to do, and much more. They'll be especially helpful for layouts that need to be dramatically different across media breakpoints. Hope that helps!

NKCSS 13y ago

Cool, very cool, but the whole IE11+ thing just makes me not wanting to use this. Let's hope for a js shim, because it feels very nice and clean.

bhauer 13y ago

This is awesome. Very much appreciated and I look forward to more adoption of IE 11 on Windows so that this can be put to better widespread use. One nit, though: would you be able to restructure the examples to avoid use of the !important CSS directive? Seeing that made me cringe.

philipwalton 13y ago
There's absolutely nothing wrong with `!important` if used correctly. The problem is when people use `!important` because they don't understand CSS specificity.
- bhauer 13y ago
  Well, true. But all scenarios should be solvable via specificity alone. I feel this is similar to saying there's absolutely nothing wrong with Goto if used correctly. The problem is when people use Goto because they don't understand other structural mechanisms. As I said, it's just a nit that they can consider it or ignore it as they please. If this were just some web page, I would never even care. But since they encouraged me to open my DOM inspector and look at the code, I wanted them to know that I cringed when I saw the !important. That's it.
  - philipwalton 13y ago
    I disagree. In classes that are supposed to be global helpers/modifiers, it makes absolute sense to use `!important`. For example, if I have the utility class `.u-hidden`, that selector has very low specificity. But if want to be damn sure that anything I put that class on gets hidden. There's no way to use specificity in this case because it's generalized for use on any website. This is a common pattern seen in most well architected CSS libraries today. BTW, I am the they you were referring to :)
    - bhauer 13y ago
      Well, in that case, I retract the comment. The work you've done in demonstrating Flexbox is too valuable to suffer pedantic and (as you point out, ultimately not even necessary) points about !important. Thanks again for the work!

caiob 13y ago

Nice proof of concept.

jgon 13y ago

I am excited by the prospects of flexbox, but disappointed by it as well. Maybe someone can correct me here, but when I started using flexbox it seemed to me like another case of the W3C being a day late and a dollar short. I mean, something like flexbox should have been the very first thing added to CSS, but here we are in 2013 and we can maybe, sort of use it, as long as we don't care about a vast number of people using IE. But even then, let's say you want to do something like have a resizable canvas or WebGL context. You know, like you can get with absolutely any other application toolkit. Now maybe I totally missed how to do this in my hours and hours of frustration, and if so the person who corrects me will have my undying gratitude. But how was it that the first thing I thought to do was to see if I can have a resizable canvas with other elements controls (ie a drawing application, or something else), and yet this sort of thing did not occur to the W3C in the years they spent working on the spec. Do those people develop applications or is it all just about creating documents that are slightly dynamic? And so now I'll probably have to wait until 2020 and the flexbox spec revision or something else until I can have contexts to draw to that will resize to fit their container, without going through all sorts of contortions to manually size then. Progress, ladies and gentlemen. Progress.

e12e 13y ago

While this does make a few things that are already reasonably possible in css easier, I'd much rather see adoption of: http://dev.w3.org/csswg/css-regions/ http://dev.w3.org/csswg/css-regions/ That would be a pretty major departure from how layout works now, but is IMNHO better than the half-working "css columns" stuff we have now (not to mention the mess that is fload, absolute vs fixed positioning etc). And it's based on a lot of earlier work from layout in the DTP world - in a good way. It makes sense -- if you want to do "fancy" layout in the browser at all. And since modern browsers can't really display text properly (say, do some basic hyphenation) -- we're pretty much forced to do layout via css -- even if all we want do to is present some text for reading. It's beyond me why no browser will render a page like: <html> <h1>A heading</h1> <p>A paragraph or two</p> <h2>Maybe a subhead</h2> <p> ... </p> </html> In a way that's actually pleasant to read. I'd even accept going back to the horrible standard rendering if any css was included -- just do the right thing by default. (Actually, a small enough tablet does a better job than most desktop browsers, but that is purely by accident -- and they still have pretty awful default colours (white on black -- too high contrast) -- and are much too hard to customize reasonably for the average users). edit: As some of the other comments have mentioned, css is ok for styling -- but pretty bad at layout. I'd welcome both these specs -- and maybe a (stronger?) recommendation regarding how to hyphenate/space text (eg. along the lines of how (La)TeX does it).

tripzilch 13y ago

Wow. I dunno how you managed it, but in Opera 12.16 you get THIS: http://i.imgur.com/mGRDWdp.jpg http://i.imgur.com/mGRDWdp.jpg I have never seen this before. At 100% zoom it seems fine, this screenshot is at 150% zoom and after scrolling a few lines. I'm aware that this is probably a browser bug just as much as to blame your CSS. But I have never seen a webpage do this with just CSS! Somehow it doesn't seem to clear the screen buffer anymore, when I clicked the link on HN (not into a new tab) it even shone through the HN frontpage on the background. The previous page. What did you do?? :) (also that sounds like a cross-domain content leak waiting to happen, but that's Opera's problem). It's very contemporary glitch art, with the juxtaposed perspective demo screenshots shining through in the back, beautiful, but not very hack-free ;-)