10 ms·

Solved by Flexbox

671 points by oskarth 11y ago

Ygg2 11y ago
What layouts does Flexbox solve that Cassowary[0] or GSS[1] layout doesn't? [0]http://en.wikipedia.org/wiki/Cassowary_(software) http://en.wikipedia.org/wiki/Cassowary_(software) [1]http://gridstylesheets.org/ http://gridstylesheets.org/
- de_dave 11y ago
  For a start, flexbox doesn't require JS.
  - Ygg2 11y ago
    I meant more as in Layouts. Anyway, cleared that miscommunication.
- dyladan 11y ago
  Built-in browser support
  - Ygg2 11y ago
    That's kinda only true at the moment. With https://wiki.css-houdini.org/ https://wiki.css-houdini.org/ there is a chance you could implement custom layout in CSS.
- kagamine 11y ago
  As another user says, no js. Pure CSS runs in the browser without a get request (other than the CSS file you are already using, obv.) so it eliminates the need for a grid system like Bootstrap, 960gs etc. The 'grid' is there in the CSS and html where it is meant to be, without the need for @media queries with 10 decimal points and 15 font sizes. It also provides more layout options than currently exist without the need for hacky solutions. How useful the linked site is right now is questionable though. If you want a IE8+ cross browser & mobile site to rely on flex-box ... it can be done and quite easily, but not with the skeleton examples on that page (but they do point that out themselves).
  - scotu 11y ago
    I'd like to read more about flexbox, any link you'd recommend? Especially backwards compatibility and the cross browser/mobile you are mentioning are something I'm interested in. Thanks
    - phaer 11y ago
      http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox
    - Eric_WVGG 11y ago
      https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties?utm_content=buffer4b45b&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-p...
    - kagamine 11y ago
      https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes?redirectlocale=en-US&redirectslug=CSS%2FTutorials%2FUsing_CSS_flexible_boxes https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi...
- woah 11y ago
  Here is some extensive discussion on that very issue: https://twitter.com/nikitonsky/status/561941079038390273?__hstc=114081816.f76a75a67c7899992519d5ce8d6f27e8.1432297175947.1432297175947.1432297175947.1&__hssc=114081816.1.1432297175948&__hsfp=554760146 https://twitter.com/nikitonsky/status/561941079038390273?__h... Basically, constraint solving is harder to understanding, doesn't support wrapping, and is slow.
  - Ygg2 11y ago
    This is the kind of response I was looking for. Though I have to ask, is this specific to Cassowary.js or to Cassowary constraint solver in general? Because from what I've seen/heard, the Cassowary constraint solver is used extensively in Mac OS X/iOS for UI layout, which AFAIK isn't really referred to as slow. Plus the constraint solver does operate on a matrix of constraint, which should make it easier to work on GPU.
    - pcwalton 11y ago
      GPU based Web page layout has so many practical hurdles to overcome that the fact that Cassowary can be described in terms of a matrix isn't relevant.
    - recuter 11y ago
      There's no reason why constraint solving wouldn't work just as well in the browser as AutoLayout works on OSX/iOS if it was natively implemented. It is not natively implemented however. Also, to take it further, Cassowary.js could solve for and output to flexbox as a backend.
    - panic 11y ago
      Autolayout is very slow compared to manual layout on iOS. It limits the complexity of the UI you can build, especially if you need to update the layout at the display's refresh rate.
Touche 11y ago
Another one to check out if you (like me) don't get how to use it just from reading about it: http://bennettfeely.com/flexplorer/ http://bennettfeely.com/flexplorer/
Already__Taken 11y ago
Just started a test project using flexbox and I'm finding myself using it constantly. In the "individual grid sample" why have you chose to make a 2/3rds and 1/3rd column with divs respectively flex:1; width:33.3333333% instead of leveraging the ratio flex:2; flex:1
- charliepark 11y ago
  I'm not sure I'm looking at the example you're looking at, but generally: a Flexbox layout will defer to the content, where when you're laying out on a grid, you want the content to defer to the grid. By giving an explicit width, you tell the browser that, in this case, the specified width is what's most important for the layout.
  - Already__Taken 11y ago
    I see, That makes sense thankyou
  - garethadams 11y ago
    Luckily, this is built into the flexbox model too. By default flexbox uses an element's automatic size as the basis to calculate its new size from. However if you set flex-basis to zero then it will treat the element as if it was zero width for the purposes of calculating its new size from. So if all elements have a zero basis then the flex ratio will be the only thing affecting their final width: http://codepen.io/anon/pen/WvGLML?editors=110 http://codepen.io/anon/pen/WvGLML?editors=110
- philipwalton 11y ago
  When you use gutters sometimes the math doesn't work out quite right. http://codepen.io/anon/pen/xGEMYY http://codepen.io/anon/pen/xGEMYY
chrisguilbeau 11y ago
I came up with this very minimal implementation of flex box. Basically defines row or column, their content can be centered or marked as tight to keep from dividing the cell evenly. https://github.com/chrisguilbeau/quickflask/blob/master/s/flex.css https://github.com/chrisguilbeau/quickflask/blob/master/s/fl...
yoran 11y ago
After re-assessing our analytics a couple of weeks ago, we decided it was safe to drop support for IE9 and below. Since then, we found ourselves using more and more Flexbox for layout. Just a simple thing like vertical centering becomes much easier with Flexbox. The sticky footer technique from the website (https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ https://philipwalton.github.io/solved-by-flexbox/demos/stick...) is also something that we use on the Hstry application.
kellros 11y ago
I suspect flex-time will be coming sooner than expected. flexbox is amazing!
- arcatek 11y ago
  I've used it everywhere on two production website, and we have had close to no issue with it. I'd say it's quite safe to start using them now.
deleted 11y ago
[deleted]
philipwalton 11y ago
Solved by Flexbox creator here. I wanted to add that if you're using flexbox today, you should also check out this other repo of mine: https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs A community-curated list of flexbox issues and cross-browser workarounds for them.
- bontoJR 11y ago
  Very smart, it's nice to see you are inviting people to submit workarounds and descriptions of problems in different browser, instead of just asking for bug reports. This makes feel the project more interesting, because if I hit one of the already covered problems, I already know where I can (probably) find the solution.
- M4v3R 11y ago
  Seems that mostly IE had these issues, which are now resolved in version 12. Chrome has only one issue, which seems to be already fixed in Canary. Thank you for doing all this, that really helps spreading the word and accelerates web development!
- javajosh 11y ago
  Hat's off to you, Philip. You are putting all your eggs in one flexbox basket--and now you are taking excellent care of that basket. I think that's a very smart approach; I particularly enjoy the approach of having a codepen to demo the bug, the workaround, and a link to the filed bug with the browser. It's so obvious, which means it's genius.
- monsterix 11y ago
  Have you also tested it inside of an iframe? As far as I know support on Safari wasn't quite there yet. Last when I checked, and that was almost two months ago, Flex broke down pretty badly on iOS Safari, both on iPad and iPhone. Guess I need to revisit this probably. Thanks for the great piece of work!
  - sosuke 11y ago
    So unfortunate that we still can't just use flexbox without hacks. Do you know of any methods of 'fixing' Safari?
ashazar 11y ago
A very nice realtime flexbox simulation. http://flexboxin5.com/ http://flexboxin5.com/
- jdnier 11y ago
  Yes, that's a very nice visual introduction to what's possible with flexbox.
pandatigox 11y ago
Thank you, thank you a million times. I've recently looked into flexbox for a project I started, but all the examples and stuff out there seem very ambiguous (compared to the amount of time I'm willing to invest. I just want things TO WORK). But looking at those docs again with this will help my understanding heaps.
escherize 11y ago
Here's a highly interactive flexbox demo, done using re-com, a Clojurescript library that uses react. http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/h-box http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/h-b... Definitely try out the Show me: on the bottom. Also try checking out the checkboxes in the gray box, as well as changing the values.
emehrkay 11y ago
Thank you for this. I was just wondering how I should approach a full-height column next to a center-aligned image (http://images.apple.com/osx/photos/images/powerful_editing_tools_large.jpg http://images.apple.com/osx/photos/images/powerful_editing_t...). Flexbox seems to be the answer
lazyant 11y ago
Sorry for my laziness, how does this compare to Bootstrap?
- jsalinas 11y ago
  Bootstrap is a CSS framework and the flexbox layout is a CSS module, so you can't really compare them.
  - BlackDeath3 11y ago
    Do they not provide comparable functionality?
    - RobertKerans 11y ago
      It's analogous to asking if jQuery provides comparable functionality to JavaScript ES5 enumerables. It does, it's just a strange comparison given that the former is a library built on top of the latter language, using a different API due to the former predating the spec
- ckluis 11y ago
  Honestly a Bootstrap / Semantic UI style system that implemented Flexbox would probably be the best thing for making Flexbox more popular.
  - karlshea 11y ago
    Older browsers dying so we can actually use Flexbox on sites that have to work back a couple versions will probably help even more.
  - Conlectus 11y ago
    Didn't seem to work that well for the "Pure CSS" library that Yahoo made, which uses Flexbox.
bronlund 11y ago
It's worth mentioning that the flexbox standard has gone through three major revisions, each with very different syntax. To extend the usefulness somewhat to older browsers it's possible to mix the different versions. See this article at CSS-Tricks for some examples https://css-tricks.com/using-flexbox/ https://css-tricks.com/using-flexbox/
- zaius 11y ago
  Also worth mentioning that you can avoid having to deal with most of the problems of the multiple syntaxes if you're using sass by using bourbon's mixins - http://bourbon.io/docs/#flexbox http://bourbon.io/docs/#flexbox (or you can just not care about < IE11...)
marcuskaz 11y ago
spacer.gif
- marcuskaz 11y ago
  a down vote for "spacer.gif"? kids these days, just don't remember
  - corysama 11y ago
    Please note that the HN community takes a rather strict approach when moderating comments that contribute noise to the conversation. "Nice article!" comments are routinely downvoted. As is sarcasm, witticisms, memes, references and other styles of comments that occur frequently but do not contribute to the discussion. It's a knowingly doomed attempt to hold back the flood of noise that covers Reddit.
    - BlackDeath3 11y ago
      As it should be! The ubiquity of the "funny == upvote" mentality is rather depressing, and I'm glad that HN (generally) tries to avoid that. It makes the comments section a much more interesting place to be (to me, at least).
earp 11y ago
Flex was working out a lot better for me some ten years ago, in Mozilla extensions, as it was. There's just too many rendering glitches and performance problems with flex nowadays, so I've moved on to scripted layout. I just felt that someone should say it.
- M4v3R 11y ago
  Can you elaborate on this? What rendering glitches did you encounter?
  - earp 11y ago
    There's one right now where a combination of flex and transform3d will cause things to simply disappear in Chrome and Safari but I haven't searched for any issues reported on that. The problem is progressively getting worse, so I'm almost sure you'll encounter it if you play around with those properties. I'm unfortunately not in a position to elaborate much further in this exact moment - but if this only happens to me, I really couldn't be happier!
    - ChrisGaudreau 11y ago
      I think I actually had a similar problem, but using `filter`. Don't really remember though.
- Wintamute 11y ago
  Try writing idiomatic Flex rules based on the latest spec, and then running through PostCSS Autoprefixer. It smoothes out nearly all of the cross-browser glitches. What performances issues are you talking about?
  - earp 11y ago
    Well, I made some code that would emulate flexbox in IE for a specific HTML structure (it would parse classnames in the HTML and not the CSS, the code is still around on https://github.com/wiredearp/spiritual-mix/blob/master/dist/flex.module/flex.module.js https://github.com/wiredearp/spiritual-mix/blob/master/dist/...) but it turned out to run about a hundred times faster than the associated CSS flex that other browsers would use; even in those browsers. The layout must aspire to a certain complexity before it happens, that's why you don't notice it at first (and why I posted the comment). I just checked back with the issue called "Catastrophic flexbox perf" over on https://code.google.com/p/chromium/issues/detail?id=331352 https://code.google.com/p/chromium/issues/detail?id=331352 and it appears that it's now a lot better in Chrome, but you can try to Ctrl+F for "hosted demo" on that page and open the demo in Firefox (you should save your work first!). When the page eventually does appear, you'll see that it's really nothing special, and certainly not worth the wait.
runarberg 11y ago
Then there is the leading dots as commonly seen in tables of contents http://jsfiddle.net/hmquvmvp/ http://jsfiddle.net/hmquvmvp/
Gorkys 11y ago
Flexbox seems to serve most HTML layouts. Are there any that it doesn't work so well for? What about CSS Grid Layout? I've not heard anything about that for a while. Does that have any advantages over Flexbox?
- megaman821 11y ago
  It seems the CSS Grid Layout needs far less divs to accomplish the same layout. With Flexbox you end up creating a lot of parent elements to layout the content elements correctly. With CSS Grid Layout you can express the layout more precisely in the CSS, so there is no need for a lot parent elements.
  - rachelandrew 11y ago
    I have lots of examples of grid layout over at http://gridbyexample.com http://gridbyexample.com (you need Chrome with Experimental Web Platform features flag on to view them)
alexashka 11y ago
Solved by flexbox is nice. Regarding flexbox itself: the syntax is confusing. After working on html/css, leaving, using auto-layout (obj-c, ios) and coming back to trying flexbox, I am scratching my head, who came up with this? row/column - use horizontal/vertical or hor/ver for short. justify-content and align-items mean different things depending on whether you're using row or column - what? why not just have hor-align, ver-align? Suppose you want a box with 3 paragraphs left-aligned, centered on the screen and a footer with 1 paragraph, aligned with the 3 paragraphs above it, how do you do this? Here's my pseudo-code: body ver nowrap, hor-align center. add 2 flex boxes ver nowrap. box 1 height stretch, hor-align left, ver-align center. box 2 height fit-content, hor-align left, ver-align center. add 3 paragraphs to box 1. add 1 paragraph to box 2. In reality, it is: body flex: column nowrap, justify-content: center, or is it align-items? I don't know, let's guess. How do I do box 1 height stretch? Hm... I don't intuitively know because nothing intuitively makes sense with flexbox. The answer turns out to be flex: 1 on box 1 and flex: 0 on box 2. Great syntax. And the pain continues. Btw, if you set the paragraph margin to 1em 1em 1em 1em;, it breaks the horizontal alignment of the paragraphs, making them center-aligned, why? Only God knows. If you set margin: 1px 1px 1px 1px, it works as expected. What?! Flexbox is light years ahead of the retardation that is floats and clears and the rest of it but it is a FAR cry from auto-layout. Let me set the height of an element... in relation to another element... ANY element... Why am I doing flex: 2, flex: 1 but that only works for sibling elements? What if I want box 1 width to be 20% of the height of box 2 that's elsewhere on the page? How do I do that in flexbox? Even if there is a way, the fact that I don't know and I've spent 2 days figuring it out says it all.
- Bahamut 11y ago
  I disagree with row/column vs. hor/ver - the web mostly operates on thinking in terms of rows and columns. Otherwise, I do agree there is some confusion with the flexbox syntax and understanding it. I have found http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://css-tricks.com/snippets/css/a-guide-to-flexbox/ immensely useful.
  - dlubarov 11y ago
    True, but to me it wasn't obvious whether "flex-direction: row" meant horizontal (because a row expands horizontally as you add columns) or vertical (because a table expands vertically as you add rows).
amelius 11y ago
I certainly wonder what has gone wrong at W3C that resulted in the situation that the world's leading layout language didn't support proper vertical centering for several years (to give an example). How could this possibly happen?
- pcwalton 11y ago
  My favorite misconception! CSS 2 does support vertical centering. Google "absolute centering". I had to implement the chapter and verse that explicitly describes vertical centering...
  - thekillingjoke 11y ago
    I think OP's point was that the trick to vertical centering involves wrapping a div as a table cell and then vertically aligning that. It should be much simpler, like 'text-align:center'
    - xorcist 11y ago
      Why would you want to do that? That sounds absolutely horrific. Just center the div in absolute mode. You need to have it wrapped in something though, to have something to center against, but you shouldn't have tables in there unless you want them.
      - ConfuciusSay 11y ago
        The point remains that centering vertically with absolute positioning does not work with an element of variable height. Meanwhile, horizontally centering something of variable width is dead simple. Why the difference? It's a shortcoming of CSS.
        pcwalton 11y ago
        There is a fundamental reason for the difference: in standard CSS block/inline layout, widths depend on parent widths, but heights depend on child heights. Far from being stupid, this difference is the entire reason CSS is parallelizable at all. Flexbox makes this simpler by switching to an entirely different model, which is the right approach for UIs (as opposed to documents). But I can't really fault CSS 2.1 for not introducing flexbox right away, because CSS 2.1 is complex enough as it is.
JoshTriplett 11y ago
Very impressive gallery of solutions, and nice to see the absence of CSS hacks in those solutions. One thing to help complete the story: could this page link to a flexbox polyfill for older browsers?
- lynndylanhurley 11y ago
  This is exactly what I need. Does a polyfill even exist?
brentvatne 11y ago
Used this in my presentation on React Native the other day (http://brentvatne.ca/react-native-intro-talk/ http://brentvatne.ca/react-native-intro-talk/) as it demos beautifully how Flexbox fixes some persistent CSS layout problems, thanks! With vjeux's css-layout library, adoption from React Native on iOS and Android and mentions of perhaps adopting it in AsyncDisplayKit, Flexbox is becoming a valuable layout system to be familiar with.
tangue 11y ago
Sadly, Flexbox kills the joy of commenting on the "How to center X in CSS" that periodically appears on HN
- zodiakzz 11y ago
  Sadly? Good riddance I say. There's so much textbook cynicism here.. the more we can get rid of the better!
jcoffland 11y ago
Flexbox is great. Now we just need to wait a couple of years for 99% of the active browsers to be upgraded. I know there are shims but I cannot imagine they don't come with caveats. Web development has come a long way but it's a slow process. Remember when we had to support IE6. (shudder) Now most people are ditching IE8 but 9 is still common.
- randunel 11y ago
  Saw a post on stackoverflow the other day where the OP justified in comments that their client had 7% IE7 users. Browsers are getting upgraded in general, but you still get government-x and company-y asking for IE7 support.
  - robocat 11y ago
    Sometimes IE7 statistics based on user-agent strings is unreliable. We have a phantom measurement of 3% IE7 usage when the actual usage is 0% (our web app prevents IE7 users using JavaScript because it is too broken). The measured IE7 users are actually using IE8 (as a control embedded within a Windows exe, actual usage measured using @cc_on @_jscript_version).
yourpaldval 11y ago
Nice work Phil!
lisowski 11y ago
This is awesome! I've been building an app with a grid that scrolls horizontally and this is the best solution! Getting this pattern in html is really hard: 1 4 7 10 2 5 8 11 3 6 9 12 Other than than columns, which dont respond the screen size that well, this is the only good option. Thanks for educating me!
orthecreedence 11y ago
I'm actually kind of pissed that flexbox solved everything but horizontal masonry layouts. This layout has been javascript-bolstered for years now and it sucks there's no pure-html solution. You can do google-images-style layouts (right-to-left, fixed height, variable width) but pinterest-style (right-to-left, variable height, fixed width) is impossible and requires (slow) javascript. If I'm wrong, I'll gladly take 100 downvotes in exchange for a link to a resource that has flexbox-driven horizontal masonry instructions.
- Nadya 11y ago
  Something like this? http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Fl...
  - orthecreedence 11y ago
    That is a vertical layout. It goes top to bottom, not left to right: 1 4 7 2 5 8 3 6 9 So, no, that doesn't solve the problem.
    - Nadya 11y ago
      Ah, my bad! I was a bit focused on "Pinterest style" and shared the first thing that came to mind.
      - orthecreedence 11y ago
        No problem. I saw that post a few months back and thought "wow, finally!!" but once I implemented it I realized it wouldn't work. Unfortunately going from vertical to horizontal requires fixed height flex elements.
killmanmanman 11y ago
Cool
lisper 11y ago
All these things may be solved by flexbox, but they were also all solved by tables 20 years ago.
petepete 11y ago
I spent more than an hour and a half yesterday trying to get a sticky footer working in a non-hacky way. This morning, using the technique described here, it took me less than five minutes and it involved no hacks or trickery. Thank you.

671 points by oskarth 11y ago

Ygg2 11y ago

What layouts does Flexbox solve that Cassowary[0] or GSS[1] layout doesn't? [0]http://en.wikipedia.org/wiki/Cassowary_(software) http://en.wikipedia.org/wiki/Cassowary_(software) [1]http://gridstylesheets.org/ http://gridstylesheets.org/

de_dave 11y ago
For a start, flexbox doesn't require JS.
- Ygg2 11y ago
  I meant more as in Layouts. Anyway, cleared that miscommunication.
dyladan 11y ago
Built-in browser support
- Ygg2 11y ago
  That's kinda only true at the moment. With https://wiki.css-houdini.org/ https://wiki.css-houdini.org/ there is a chance you could implement custom layout in CSS.
kagamine 11y ago
As another user says, no js. Pure CSS runs in the browser without a get request (other than the CSS file you are already using, obv.) so it eliminates the need for a grid system like Bootstrap, 960gs etc. The 'grid' is there in the CSS and html where it is meant to be, without the need for @media queries with 10 decimal points and 15 font sizes. It also provides more layout options than currently exist without the need for hacky solutions. How useful the linked site is right now is questionable though. If you want a IE8+ cross browser & mobile site to rely on flex-box ... it can be done and quite easily, but not with the skeleton examples on that page (but they do point that out themselves).
- scotu 11y ago
  I'd like to read more about flexbox, any link you'd recommend? Especially backwards compatibility and the cross browser/mobile you are mentioning are something I'm interested in. Thanks
  - phaer 11y ago
    http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox
  - Eric_WVGG 11y ago
    https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties?utm_content=buffer4b45b&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-p...
  - kagamine 11y ago
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes?redirectlocale=en-US&redirectslug=CSS%2FTutorials%2FUsing_CSS_flexible_boxes https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi...
woah 11y ago
Here is some extensive discussion on that very issue: https://twitter.com/nikitonsky/status/561941079038390273?__hstc=114081816.f76a75a67c7899992519d5ce8d6f27e8.1432297175947.1432297175947.1432297175947.1&__hssc=114081816.1.1432297175948&__hsfp=554760146 https://twitter.com/nikitonsky/status/561941079038390273?__h... Basically, constraint solving is harder to understanding, doesn't support wrapping, and is slow.
- Ygg2 11y ago
  This is the kind of response I was looking for. Though I have to ask, is this specific to Cassowary.js or to Cassowary constraint solver in general? Because from what I've seen/heard, the Cassowary constraint solver is used extensively in Mac OS X/iOS for UI layout, which AFAIK isn't really referred to as slow. Plus the constraint solver does operate on a matrix of constraint, which should make it easier to work on GPU.
  - pcwalton 11y ago
    GPU based Web page layout has so many practical hurdles to overcome that the fact that Cassowary can be described in terms of a matrix isn't relevant.
  - recuter 11y ago
    There's no reason why constraint solving wouldn't work just as well in the browser as AutoLayout works on OSX/iOS if it was natively implemented. It is not natively implemented however. Also, to take it further, Cassowary.js could solve for and output to flexbox as a backend.
  - panic 11y ago
    Autolayout is very slow compared to manual layout on iOS. It limits the complexity of the UI you can build, especially if you need to update the layout at the display's refresh rate.

Touche 11y ago

Another one to check out if you (like me) don't get how to use it just from reading about it: http://bennettfeely.com/flexplorer/ http://bennettfeely.com/flexplorer/

Already__Taken 11y ago

Just started a test project using flexbox and I'm finding myself using it constantly. In the "individual grid sample" why have you chose to make a 2/3rds and 1/3rd column with divs respectively flex:1; width:33.3333333% instead of leveraging the ratio flex:2; flex:1

charliepark 11y ago
I'm not sure I'm looking at the example you're looking at, but generally: a Flexbox layout will defer to the content, where when you're laying out on a grid, you want the content to defer to the grid. By giving an explicit width, you tell the browser that, in this case, the specified width is what's most important for the layout.
- Already__Taken 11y ago
  I see, That makes sense thankyou
- garethadams 11y ago
  Luckily, this is built into the flexbox model too. By default flexbox uses an element's automatic size as the basis to calculate its new size from. However if you set flex-basis to zero then it will treat the element as if it was zero width for the purposes of calculating its new size from. So if all elements have a zero basis then the flex ratio will be the only thing affecting their final width: http://codepen.io/anon/pen/WvGLML?editors=110 http://codepen.io/anon/pen/WvGLML?editors=110
philipwalton 11y ago
When you use gutters sometimes the math doesn't work out quite right. http://codepen.io/anon/pen/xGEMYY http://codepen.io/anon/pen/xGEMYY

chrisguilbeau 11y ago

I came up with this very minimal implementation of flex box. Basically defines row or column, their content can be centered or marked as tight to keep from dividing the cell evenly. https://github.com/chrisguilbeau/quickflask/blob/master/s/flex.css https://github.com/chrisguilbeau/quickflask/blob/master/s/fl...

yoran 11y ago

After re-assessing our analytics a couple of weeks ago, we decided it was safe to drop support for IE9 and below. Since then, we found ourselves using more and more Flexbox for layout. Just a simple thing like vertical centering becomes much easier with Flexbox. The sticky footer technique from the website (https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ https://philipwalton.github.io/solved-by-flexbox/demos/stick...) is also something that we use on the Hstry application.

kellros 11y ago

I suspect flex-time will be coming sooner than expected. flexbox is amazing!

arcatek 11y ago
I've used it everywhere on two production website, and we have had close to no issue with it. I'd say it's quite safe to start using them now.

deleted 11y ago

[deleted]

philipwalton 11y ago

Solved by Flexbox creator here. I wanted to add that if you're using flexbox today, you should also check out this other repo of mine: https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs A community-curated list of flexbox issues and cross-browser workarounds for them.

bontoJR 11y ago
Very smart, it's nice to see you are inviting people to submit workarounds and descriptions of problems in different browser, instead of just asking for bug reports. This makes feel the project more interesting, because if I hit one of the already covered problems, I already know where I can (probably) find the solution.
M4v3R 11y ago
Seems that mostly IE had these issues, which are now resolved in version 12. Chrome has only one issue, which seems to be already fixed in Canary. Thank you for doing all this, that really helps spreading the word and accelerates web development!
javajosh 11y ago
Hat's off to you, Philip. You are putting all your eggs in one flexbox basket--and now you are taking excellent care of that basket. I think that's a very smart approach; I particularly enjoy the approach of having a codepen to demo the bug, the workaround, and a link to the filed bug with the browser. It's so obvious, which means it's genius.
monsterix 11y ago
Have you also tested it inside of an iframe? As far as I know support on Safari wasn't quite there yet. Last when I checked, and that was almost two months ago, Flex broke down pretty badly on iOS Safari, both on iPad and iPhone. Guess I need to revisit this probably. Thanks for the great piece of work!
- sosuke 11y ago
  So unfortunate that we still can't just use flexbox without hacks. Do you know of any methods of 'fixing' Safari?

ashazar 11y ago

A very nice realtime flexbox simulation. http://flexboxin5.com/ http://flexboxin5.com/

jdnier 11y ago
Yes, that's a very nice visual introduction to what's possible with flexbox.

pandatigox 11y ago

Thank you, thank you a million times. I've recently looked into flexbox for a project I started, but all the examples and stuff out there seem very ambiguous (compared to the amount of time I'm willing to invest. I just want things TO WORK). But looking at those docs again with this will help my understanding heaps.

escherize 11y ago

Here's a highly interactive flexbox demo, done using re-com, a Clojurescript library that uses react. http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/h-box http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/h-b... Definitely try out the Show me: on the bottom. Also try checking out the checkboxes in the gray box, as well as changing the values.

emehrkay 11y ago

Thank you for this. I was just wondering how I should approach a full-height column next to a center-aligned image (http://images.apple.com/osx/photos/images/powerful_editing_tools_large.jpg http://images.apple.com/osx/photos/images/powerful_editing_t...). Flexbox seems to be the answer

lazyant 11y ago

Sorry for my laziness, how does this compare to Bootstrap?

jsalinas 11y ago
Bootstrap is a CSS framework and the flexbox layout is a CSS module, so you can't really compare them.
- BlackDeath3 11y ago
  Do they not provide comparable functionality?
  - RobertKerans 11y ago
    It's analogous to asking if jQuery provides comparable functionality to JavaScript ES5 enumerables. It does, it's just a strange comparison given that the former is a library built on top of the latter language, using a different API due to the former predating the spec
ckluis 11y ago
Honestly a Bootstrap / Semantic UI style system that implemented Flexbox would probably be the best thing for making Flexbox more popular.
- karlshea 11y ago
  Older browsers dying so we can actually use Flexbox on sites that have to work back a couple versions will probably help even more.
- Conlectus 11y ago
  Didn't seem to work that well for the "Pure CSS" library that Yahoo made, which uses Flexbox.

bronlund 11y ago

It's worth mentioning that the flexbox standard has gone through three major revisions, each with very different syntax. To extend the usefulness somewhat to older browsers it's possible to mix the different versions. See this article at CSS-Tricks for some examples https://css-tricks.com/using-flexbox/ https://css-tricks.com/using-flexbox/

zaius 11y ago
Also worth mentioning that you can avoid having to deal with most of the problems of the multiple syntaxes if you're using sass by using bourbon's mixins - http://bourbon.io/docs/#flexbox http://bourbon.io/docs/#flexbox (or you can just not care about < IE11...)

marcuskaz 11y ago

spacer.gif

marcuskaz 11y ago
a down vote for "spacer.gif"? kids these days, just don't remember
- corysama 11y ago
  Please note that the HN community takes a rather strict approach when moderating comments that contribute noise to the conversation. "Nice article!" comments are routinely downvoted. As is sarcasm, witticisms, memes, references and other styles of comments that occur frequently but do not contribute to the discussion. It's a knowingly doomed attempt to hold back the flood of noise that covers Reddit.
  - BlackDeath3 11y ago
    As it should be! The ubiquity of the "funny == upvote" mentality is rather depressing, and I'm glad that HN (generally) tries to avoid that. It makes the comments section a much more interesting place to be (to me, at least).

earp 11y ago

Flex was working out a lot better for me some ten years ago, in Mozilla extensions, as it was. There's just too many rendering glitches and performance problems with flex nowadays, so I've moved on to scripted layout. I just felt that someone should say it.

M4v3R 11y ago
Can you elaborate on this? What rendering glitches did you encounter?
- earp 11y ago
  There's one right now where a combination of flex and transform3d will cause things to simply disappear in Chrome and Safari but I haven't searched for any issues reported on that. The problem is progressively getting worse, so I'm almost sure you'll encounter it if you play around with those properties. I'm unfortunately not in a position to elaborate much further in this exact moment - but if this only happens to me, I really couldn't be happier!
  - ChrisGaudreau 11y ago
    I think I actually had a similar problem, but using `filter`. Don't really remember though.
Wintamute 11y ago
Try writing idiomatic Flex rules based on the latest spec, and then running through PostCSS Autoprefixer. It smoothes out nearly all of the cross-browser glitches. What performances issues are you talking about?
- earp 11y ago
  Well, I made some code that would emulate flexbox in IE for a specific HTML structure (it would parse classnames in the HTML and not the CSS, the code is still around on https://github.com/wiredearp/spiritual-mix/blob/master/dist/flex.module/flex.module.js https://github.com/wiredearp/spiritual-mix/blob/master/dist/...) but it turned out to run about a hundred times faster than the associated CSS flex that other browsers would use; even in those browsers. The layout must aspire to a certain complexity before it happens, that's why you don't notice it at first (and why I posted the comment). I just checked back with the issue called "Catastrophic flexbox perf" over on https://code.google.com/p/chromium/issues/detail?id=331352 https://code.google.com/p/chromium/issues/detail?id=331352 and it appears that it's now a lot better in Chrome, but you can try to Ctrl+F for "hosted demo" on that page and open the demo in Firefox (you should save your work first!). When the page eventually does appear, you'll see that it's really nothing special, and certainly not worth the wait.

runarberg 11y ago

Then there is the leading dots as commonly seen in tables of contents http://jsfiddle.net/hmquvmvp/ http://jsfiddle.net/hmquvmvp/

Gorkys 11y ago

Flexbox seems to serve most HTML layouts. Are there any that it doesn't work so well for? What about CSS Grid Layout? I've not heard anything about that for a while. Does that have any advantages over Flexbox?

megaman821 11y ago
It seems the CSS Grid Layout needs far less divs to accomplish the same layout. With Flexbox you end up creating a lot of parent elements to layout the content elements correctly. With CSS Grid Layout you can express the layout more precisely in the CSS, so there is no need for a lot parent elements.
- rachelandrew 11y ago
  I have lots of examples of grid layout over at http://gridbyexample.com http://gridbyexample.com (you need Chrome with Experimental Web Platform features flag on to view them)

alexashka 11y ago

Solved by flexbox is nice. Regarding flexbox itself: the syntax is confusing. After working on html/css, leaving, using auto-layout (obj-c, ios) and coming back to trying flexbox, I am scratching my head, who came up with this? row/column - use horizontal/vertical or hor/ver for short. justify-content and align-items mean different things depending on whether you're using row or column - what? why not just have hor-align, ver-align? Suppose you want a box with 3 paragraphs left-aligned, centered on the screen and a footer with 1 paragraph, aligned with the 3 paragraphs above it, how do you do this? Here's my pseudo-code: body ver nowrap, hor-align center. add 2 flex boxes ver nowrap. box 1 height stretch, hor-align left, ver-align center. box 2 height fit-content, hor-align left, ver-align center. add 3 paragraphs to box 1. add 1 paragraph to box 2. In reality, it is: body flex: column nowrap, justify-content: center, or is it align-items? I don't know, let's guess. How do I do box 1 height stretch? Hm... I don't intuitively know because nothing intuitively makes sense with flexbox. The answer turns out to be flex: 1 on box 1 and flex: 0 on box 2. Great syntax. And the pain continues. Btw, if you set the paragraph margin to 1em 1em 1em 1em;, it breaks the horizontal alignment of the paragraphs, making them center-aligned, why? Only God knows. If you set margin: 1px 1px 1px 1px, it works as expected. What?! Flexbox is light years ahead of the retardation that is floats and clears and the rest of it but it is a FAR cry from auto-layout. Let me set the height of an element... in relation to another element... ANY element... Why am I doing flex: 2, flex: 1 but that only works for sibling elements? What if I want box 1 width to be 20% of the height of box 2 that's elsewhere on the page? How do I do that in flexbox? Even if there is a way, the fact that I don't know and I've spent 2 days figuring it out says it all.

Bahamut 11y ago
I disagree with row/column vs. hor/ver - the web mostly operates on thinking in terms of rows and columns. Otherwise, I do agree there is some confusion with the flexbox syntax and understanding it. I have found http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://css-tricks.com/snippets/css/a-guide-to-flexbox/ immensely useful.
- dlubarov 11y ago
  True, but to me it wasn't obvious whether "flex-direction: row" meant horizontal (because a row expands horizontally as you add columns) or vertical (because a table expands vertically as you add rows).

amelius 11y ago

I certainly wonder what has gone wrong at W3C that resulted in the situation that the world's leading layout language didn't support proper vertical centering for several years (to give an example). How could this possibly happen?

pcwalton 11y ago
My favorite misconception! CSS 2 does support vertical centering. Google "absolute centering". I had to implement the chapter and verse that explicitly describes vertical centering...
- thekillingjoke 11y ago
  I think OP's point was that the trick to vertical centering involves wrapping a div as a table cell and then vertically aligning that. It should be much simpler, like 'text-align:center'
  - xorcist 11y ago
    Why would you want to do that? That sounds absolutely horrific. Just center the div in absolute mode. You need to have it wrapped in something though, to have something to center against, but you shouldn't have tables in there unless you want them.
    - ConfuciusSay 11y ago
      The point remains that centering vertically with absolute positioning does not work with an element of variable height. Meanwhile, horizontally centering something of variable width is dead simple. Why the difference? It's a shortcoming of CSS.
      - pcwalton 11y ago
        There is a fundamental reason for the difference: in standard CSS block/inline layout, widths depend on parent widths, but heights depend on child heights. Far from being stupid, this difference is the entire reason CSS is parallelizable at all. Flexbox makes this simpler by switching to an entirely different model, which is the right approach for UIs (as opposed to documents). But I can't really fault CSS 2.1 for not introducing flexbox right away, because CSS 2.1 is complex enough as it is.

JoshTriplett 11y ago

Very impressive gallery of solutions, and nice to see the absence of CSS hacks in those solutions. One thing to help complete the story: could this page link to a flexbox polyfill for older browsers?

lynndylanhurley 11y ago
This is exactly what I need. Does a polyfill even exist?

brentvatne 11y ago

Used this in my presentation on React Native the other day (http://brentvatne.ca/react-native-intro-talk/ http://brentvatne.ca/react-native-intro-talk/) as it demos beautifully how Flexbox fixes some persistent CSS layout problems, thanks! With vjeux's css-layout library, adoption from React Native on iOS and Android and mentions of perhaps adopting it in AsyncDisplayKit, Flexbox is becoming a valuable layout system to be familiar with.

tangue 11y ago

Sadly, Flexbox kills the joy of commenting on the "How to center X in CSS" that periodically appears on HN

zodiakzz 11y ago
Sadly? Good riddance I say. There's so much textbook cynicism here.. the more we can get rid of the better!

jcoffland 11y ago

Flexbox is great. Now we just need to wait a couple of years for 99% of the active browsers to be upgraded. I know there are shims but I cannot imagine they don't come with caveats. Web development has come a long way but it's a slow process. Remember when we had to support IE6. (shudder) Now most people are ditching IE8 but 9 is still common.

randunel 11y ago
Saw a post on stackoverflow the other day where the OP justified in comments that their client had 7% IE7 users. Browsers are getting upgraded in general, but you still get government-x and company-y asking for IE7 support.
- robocat 11y ago
  Sometimes IE7 statistics based on user-agent strings is unreliable. We have a phantom measurement of 3% IE7 usage when the actual usage is 0% (our web app prevents IE7 users using JavaScript because it is too broken). The measured IE7 users are actually using IE8 (as a control embedded within a Windows exe, actual usage measured using @cc_on @_jscript_version).

yourpaldval 11y ago

Nice work Phil!

lisowski 11y ago

This is awesome! I've been building an app with a grid that scrolls horizontally and this is the best solution! Getting this pattern in html is really hard: 1 4 7 10 2 5 8 11 3 6 9 12 Other than than columns, which dont respond the screen size that well, this is the only good option. Thanks for educating me!

orthecreedence 11y ago

I'm actually kind of pissed that flexbox solved everything but horizontal masonry layouts. This layout has been javascript-bolstered for years now and it sucks there's no pure-html solution. You can do google-images-style layouts (right-to-left, fixed height, variable width) but pinterest-style (right-to-left, variable height, fixed width) is impossible and requires (slow) javascript. If I'm wrong, I'll gladly take 100 downvotes in exchange for a link to a resource that has flexbox-driven horizontal masonry instructions.

Nadya 11y ago
Something like this? http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Fl...
- orthecreedence 11y ago
  That is a vertical layout. It goes top to bottom, not left to right: 1 4 7 2 5 8 3 6 9 So, no, that doesn't solve the problem.
  - Nadya 11y ago
    Ah, my bad! I was a bit focused on "Pinterest style" and shared the first thing that came to mind.
    - orthecreedence 11y ago
      No problem. I saw that post a few months back and thought "wow, finally!!" but once I implemented it I realized it wouldn't work. Unfortunately going from vertical to horizontal requires fixed height flex elements.

killmanmanman 11y ago

Cool

lisper 11y ago

All these things may be solved by flexbox, but they were also all solved by tables 20 years ago.

petepete 11y ago

I spent more than an hour and a half yesterday trying to get a sticky footer working in a non-hacky way. This morning, using the technique described here, it took me less than five minutes and it involved no hacks or trickery. Thank you.