
Solved by Flexbox - oskarth
https://philipwalton.github.io/solved-by-flexbox/
======
philipwalton
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.

~~~
monsterix
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
So unfortunate that we still can't just use flexbox without hacks. Do you know
of any methods of 'fixing' Safari?

~~~
wernercd
Replace it with Chrome _ba dum ding_

~~~
thomasfoster96
Chrome's flexbox support ain't exactly perfect either.

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

~~~
alexashka
I didn't find it helpful - confusing, yes. I found the spec better, which I
thought there'd never come a day I'd say but yes - the flexbox spec is the
best resource for understanding flexbox. Wow. I know.

I think I'm just ranting on the html layout rules in general, for instance:

[https://css-tricks.com/almanac/properties/m/margin/](https://css-
tricks.com/almanac/properties/m/margin/)

This points out like 3 things that make NO SENSE. To center something
horizontally, you use margin: auto; What? Margins are for having space between
elements, not for centering anything. But ok let's say it is for centering,
which makes no sense, then you should be able to set the vertical margins to
auto. Wait, you can't do that. WHAT!?!

It goes on to say if you have 2 paragraphs with top and bottom margins, that
doesn't mean you have 2 paragraphs with top and bottom margins some of the
time. Because 2 paragraphs, the top/bottom margins of the 2 paragraphs will
collapse. WHAT?!?!?!?!

Yeah, flexbox is just another abysmal attempt, in the right direction mind
you. I don't know who runs the show but I'd say a 3rd year comp-sci student in
one year, can come up with a better layout engine (how it works, not
performance, by copying auto-layout for instance) than what is currently in
existence.

~~~
evolve2k
> The flexbox spec is the best resource for understanding flexbox.

Link to the Flexbox spec for anyone interested:

[http://www.w3.org/TR/css3-flexbox/](http://www.w3.org/TR/css3-flexbox/)

~~~
evolve2k
Actually I just read "Dive into Flexbox" and in 5-10 min read now have a clear
understanding of how flexbox is designed to work. Best explaination I've read.

[http://bocoup.com/weblog/dive-into-flexbox/](http://bocoup.com/weblog/dive-
into-flexbox/)

------
ashazar
A very nice realtime flexbox simulation.
[http://flexboxin5.com/](http://flexboxin5.com/)

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

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

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

~~~
metasean
[http://howtocenterincss.com/](http://howtocenterincss.com/)

~~~
dak1
I think the need for an entire domain to explain to people tricks to make it
work rather supports the original point.

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

~~~
garethadams
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)

------
runarberg
Then there is the leading dots as commonly seen in tables of contents
[http://jsfiddle.net/hmquvmvp/](http://jsfiddle.net/hmquvmvp/)

------
orthecreedence
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
Something like this?

[http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-
Fl...](http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox)

~~~
orthecreedence
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
Ah, my bad! I was a bit focused on "Pinterest style" and shared the first
thing that came to mind.

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

------
JoshTriplett
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
This is exactly what I need. Does a polyfill even exist?

------
escherize
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-b...](http://re-
demo.s3-website-ap-southeast-2.amazonaws.com/#/h-box)

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.

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

------
Ygg2
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/)

~~~
kagamine
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
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

~~~
Eric_WVGG
[https://scotch.io/tutorials/a-visual-guide-to-
css3-flexbox-p...](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-
properties?utm_content=buffer4b45b&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer)

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

------
yoran
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/stick...](https://philipwalton.github.io/solved-by-
flexbox/demos/sticky-footer/)) is also something that we use on the Hstry
application.

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

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

~~~
Wintamute
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
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/...](https://github.com/wiredearp/spiritual-
mix/blob/master/dist/flex.module/flex.module.js)) 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.

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

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

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

------
chrisguilbeau
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/fl...](https://github.com/chrisguilbeau/quickflask/blob/master/s/flex.css)

------
emehrkay
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_t...](http://images.apple.com/osx/photos/images/powerful_editing_tools_large.jpg)).
Flexbox seems to be the answer

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

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

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

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

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

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

~~~
ckluis
Honestly a Bootstrap / Semantic UI style system that implemented Flexbox would
probably be the best thing for making Flexbox more popular.

~~~
karlshea
Older browsers dying so we can actually use Flexbox on sites that have to work
back a couple versions will probably help even more.

------
yourpaldval
Nice work Phil!

------
killmanmanman
Cool

------
marcuskaz
spacer.gif

~~~
marcuskaz
a down vote for "spacer.gif"? kids these days, just don't remember

~~~
corysama
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
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).

