
Solved By Flexbox – Cleaner, hack-free CSS - philipwalton
http://philipwalton.github.io/solved-by-flexbox
======
bowlofpetunias
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
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.

~~~
ryanSrich
Actually it is.

Third party support businesses stand to make a pretty profit off of Microsoft
ditching support for XP. I'm afraid XP will live on for quite some time after
it's officially unsupported.

The medical field is perhaps one of the largest supporters of these ancient
systems. I can't tell you how many times I've heard my medical friends say
they use EMR and documentation software that ONLY works in IE6. You think
those underfunded nursing homes and second rate hospitals are going to spend
thousands updating their systems?

~~~
melling
So, they better make arrangements to get Chrome or Firefox installed along
side of IE6. The reality is that IE6 support is not going to happen. It's not
worth the extra cost of development.

------
mikeknoop
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
This is in development:
[https://github.com/doctyper/reflexie](https://github.com/doctyper/reflexie)

~~~
christiangenco
[https://github.com/doctyper/reflexie/tree/develop](https://github.com/doctyper/reflexie/tree/develop)
for actual content.

------
TuringTest
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
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
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.

------
erichurkman
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
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)

------
hpaavola
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.

~~~
dools
You can solve the vertical alignment problem pretty easily using
display:inline-block

~~~
hpaavola
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.

~~~
emn13
The extra scrollbar is due to fact that you've set height to 100% but you
still have padding on the body tag. Also, unrelatedly, you should remove the
space between the body tag and the div tag to avoid font-specific horizontal
offsets.

------
SnowLprd
"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.

~~~
philipwalton
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/maste...](https://github.com/philipwalton/solved-by-
flexbox/blob/master/scripts/track-events.js)

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.

~~~
SnowLprd
Thanks for the detailed explanation. My unsolicited two cents is that forcing
this behavior on site visitors isn't worth whatever value you get from the
analytics data.

Perhaps I'm in the minority here, but I find this behavior to be offensive
enough that I immediately stop reading and move on. Trading user experience
for analytics data is not a good trade.

~~~
spicyj
I also find forcing a new window/tab annoying and it makes sense not to when
you're targeting a technical audience. However, I've just as often heard
complaints from less-technical users who don't reflexively cmd/ctrl-click on
links and for whom opening new windows in tabs is a feature, so even though
forcing a new window can be annoying it's often a decision made to improve UX.

~~~
SnowLprd
That's what the Back button is for.

Less-technical users don't need to know how to cmd/ctrl-click on links because
even less-technical users know how to use the Back button. If they don't want
to use the Back button and instead want to open links in new tabs, there are
multiple mechanisms available to them (whether they know about them or not).

The reverse is not true: if you _don 't_ want to open a link in a new tab, but
that behavior is being forced on you, there is no way to avoid it.

Regardless of the motive, this behavior is not a UX improvement.

~~~
andybak
In fact - opening a new tab BREAKS the back button. I've seen my father
baffled when a new tab opened and he can't work out how to get back. (his tab
bar has 300 open tabs as he never closes them).

So - opening in a new tab is a disaster for non-technical users and an
annoyance for technical ones.

There might be some middle-ground where it's a good idea but I wouldn't bank
on it.

~~~
jessaustin
I can confirm that many users of my father's generation (including him) are
completely baffled by tabs. My _grand_ father, however, seems to have no
problem. I don't know if that means anything.

------
jgon
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.

------
jimmcslim
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
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!

------
e12e
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).

------
ethana
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
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
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
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.

------
straws
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?

------
tripzilch
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 ;-)

------
bhauer
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
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
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
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
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!

~~~
philipwalton
You're quite welcome. It was a fun project to work on.

------
jwarren
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.

------
NKCSS
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.

------
sirbrad
This is great work

------
caiob
Nice proof of concept.

------
jafaku
This site is unreadable for me.

~~~
roryokane
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
I'm talking about the typography. It's very thin and light.

