Hacker News new | comments | show | ask | jobs | submit login
Flexbox in 5 minutes (flexboxin5.com)
340 points by robin_reala 932 days ago | hide | past | web | 80 comments | favorite



I remember fantasai working really hard looking at her computer a few years ago (in a coworking space at SF). I asked her what she was working on - and she replied "working on css". I thought she was a front-end dev.

6 months later I realized she was working literally on the css flexbox spec, not writing css for a site!

Glad this flexbox stuff is picking up. people like her put an insane amount of time and effort to make it come out this way.


I went to school with a girl who went by fantasai online and did web-ish stuff -- you wouldn't be talking about someone called Elika, would you?



Well I'll be. Some people have clearly done more with their lives since graduation than others :)


That's her :)


I rebuilt my personal site on Flexbox in December last year after making the call that it was widely supported enough [1]. There were a few hiccups:

1. Safari's requirement to use the webkit- prefix is a pain. Thankfully there are SASS libraries that work around that [2], but you aren't using Flexbox directly.

2. Google's pagespeed tools doesn't support it. It's an ancient version of Webkit -- your mobile score will suffer. If that matters to you, you'll have to do some hacking to ensure that it doesn't affect things on the mobile side.

[1] for a personal site.

[2] https://github.com/philipwalton/solved-by-flexbox


re 2.: sure? And did you try it with the new Google Mobile Freindly Test too?


Definitely sure. It supported it just marginally enough to mangle it in a way that you couldn't work around. My fix was to literally check if the floating sidebar overlapped the content and, if so, add a css class to the body that I could use to fix the pagespeed insights browser.

I'll give the Mobile Friendly Test a shot with and without the hack.

Edit: Yup, still busted. And the new test is broken as well (probably using the same backend). This is what it looks like: http://imgur.com/fBIP80y


I run a popular site that heavily uses flexboxes, with dozens of flex containers on every page, different alignments, etc. I just checked pagespeed insights, and the site renders fine in the little mobile phone preview from your image, so it's definitely supported. Check your code, it might be incorrect, you might need webkit prefixes, or you might be using outdated flexbox specs that have been dropped.


That's scary, given that in April, Google will start using mobile-readiness in its ranking algo.


Amazing, I had always heard flexbox being touted as the "next big thing" but it had come across as confusing and obscure. This was a great tutorial and I will definitely be using flexbox in the future.

It seems to almost eliminate the need for a grid system a la bootstrap, which is great because I know a lot of people that use bootstrap specifically for the grid system and throw out/re implement all of the other parts.


> but it had come across as confusing

I would disagree here, there is another great resource online for 2 years and showing up as #1 on Google when searching:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Polymer has a really great flexbox helper that relies on attributes to add the appropriate flexbox properties. Just add 'layout' to the container, and then 'horizontal' or 'vertical'. Any element you want to grow, add 'flex':

https://www.polymer-project.org/docs/polymer/layout-attrs.ht...


Edit: which was removed 19 days ago:

https://github.com/Polymer/polymer/commit/d45aa98c9267153ce0...

I guess looking at how verbose the implementation was and what it actually gives you over learning the CSS, you're probably better off learning the CSS.


I think it'll be sticking around, just not in Polymer core. Core should be as focused as possible.


> It seems to almost eliminate the need for a grid system a la bootstrap

Having classes/mixins is convenient, rather than need to implement the properties "by hand" all the time. But it does get rid of most of the complexity and compatibility issues, and provides additional features (source-order independence, column-major display, ...)


For what it's worth, the tradition wisdom is that flexbox is meant for widgets (e.g. the social icons in your sidebar), not for the main layout of your content.


No way. It's great for layouts too, particularly the ever-difficult fluid-3-column-on-desktop-to-one-column-on-mobile "holy grail" layout [0].

That site has a few other great examples like media objects that would usually take a ton of CSS hacking but are solved easily with flexbox [1].

[0] http://philipwalton.github.io/solved-by-flexbox/demos/holy-g... [1] http://philipwalton.github.io/solved-by-flexbox/


The FB CSS replacement (sorry, can't remember what it was called) used it for nearly every block element.


Traditional wisdom gets overturned awfully quickly when people find out that tools can be used in new ways.


So, based on a little experimentation, it seems like "align-items" and "align-content" behave identically, except that "align-items" is only used when there is one row of boxes and "align-content" is only used when there are multiple rows.

I find it hard to imagine a case where I'd want the alignment to suddenly change based on how my elements happened to be wrapped. Is there ever a situation where this wouldn't be confusing? And if not, why do these two separate properties exist?

(Also, I like this tutorial but there are some race conditions in the implementation. Clicking the "next slide" arrow too fast just replays the fade-in animation instead of advancing the slide. And on slide 30, if you click the "make a menu" link at the wrong time you can end up with the "flexbox in 5 minutes" intro text displayed on top of the boxes.)


> So, based on a little experimentation, it seems like "align-items" and "align-content" behave identically, except that "align-items" is only used when there is one row of boxes and "align-content" is only used when there are multiple rows.

> why do these two separate properties exist?

Because they don't behave identically: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Thank you for the explanation. The guide just said "Play with them ...", so it was not obvious (at least to me teraflop) what was different about them.


This is awesome, but the chosen title is misleading. This requires at least 20 minutes.


Agreed on both points. Granted if it was "Flexbox in 20" I may have been less likely to take a look :)


TBH, I chose the title more for the alliteration :)


"Flexbox in 5 4-minute fractions"


According to http://caniuse.com/#feat=flexbox it is already widely deployed.

Why did I wait?


It is lovely, and I wouldn't want to miss it anymore. But the spec is still somewhat fluid, and I occasionally run into unpleasant edge cases like this one:

http://stackoverflow.com/questions/28563384/flex-basis-webki...


phillipwalton keeps a list of flexbox implementation bugs here: https://github.com/philipwalton/flexbugs

Hopefully the day will soon come when I don’t have to refer to it.


Yes, I got in touch with him through that repo; he was then kind enough to follow up on www-style and answer my SO question.


AFAIK the only current reason to wait is IE compatibility. Anybody know of a shim?


no proper supprt in IE10..

is there any hope that Microsoft will make their new Browser evergreen???


IE10+ is already evergreen by default and should automatically update to IE11 (assuming the user didn't turn off auto-update).


no...its not by default...if you turn of windows updates, IE10 won't update as well..


We use flexbox and support IE10 with it at my company. In practice, Safari 7 has been far more of a pain with it than IE10.


I just tested flexboxin5 site on IE10 and it seemed quite broken. Can you describe how you make IE10 work with flexbox without tons of work?


1) need to add -ms prefix 2) and it supports initial flex style..


I've read that facebook implemented flexbox-like layouting in javascript to use with react native. I wonder how much the two implementations differ.

https://www.youtube.com/watch?v=7rDsRXj9-cU&t=996


Not much. Facebook used a very thorough testing method where it tests millions of permutations of flexbox variables and compares the output with the browser.


Author/Creator of FlexboxIn5 here:

I'm glad to see this thread, because there seem to be some bugs I need to address.

Any other features you guys would find helpful? Feel free to tell me here or on twitter: @_devbryce


Let people know cookies are required. It took me a moment to realize that's why nothing was happening.

Then ask whether you really require cookies. What value do they add?


I'm really confused by the downvoting on this site.

The page fails to work if cookies are disabled. That is a fact. Some people - a minority, perhaps - disable cookies and other technologies, often for privacy reasons. That is also a fact.

(We could discuss the ins and outs of that discussion, the value proposition, the efficacy, etc., but none of those change those two simple facts.)

Another fact: Sites that use cookies must announce this use in certain jurisdictions. Again we could discuss the merits of this requirement, but that would not change the fact of it.

So were the downvotes for stating facts or for questioning a design decision?

I would have thought HN folks were rather keen on both facts and design discussions.

Perhaps I'm wrong. I'm definitely surprised. Ah well.


Step 32 has me scratching my head. I've set the suggested property values, but all of the elements still shrink at a uniform rate when I click resize box.

Am I missing something, or is there an error/omission in the instructions?


Me too. And on 34, "You'll see that when the item reaches its flex basis, it stops flexing and something else has to flex" doesn't actually seem to be true. Can't tell if there's a bug or if it's something I've done wrong.


Yes, me too. Chrome 41.0.2272.76m


I'm still confused with flex-grow (step 28). When I set the value of an item to 2 while the other items remain at 1, it increase in width a little bit but not nearly twice as much (relative to the others). What does 2 actual do here?

Chrome 41.0.2272.76 m


As I recall it, the available space is divided by the sum.

So in this case the width for "2" would be: 2 * (available_width / (1 * other_items + 2))


So how does flexbox compare to the tools we were using in the late 90s/early 00s? Is layout finally as simple again as it was when it was still OK to use tables and a transparent spacer.gif for everything?


You can use display: table; and its siblings.

https://developer.mozilla.org/en-US/docs/Web/CSS/display


No, it is not that simple. But it is more flexible.


Doesn't work properly in safari, seems to be missing the -webkit prefixes (still..) required by safari. :/


Not that this helps the demo, but for your own apps autoprefixer does a good job of polyfilling in the previous versions of flexbox that are still hanging around (assuming you’ve got a build chain): https://github.com/postcss/autoprefixer


I'm working on a major redesign right now and working heavily with Flexbox. Between all the prefixes and the display: table fallbacks I'm using for old IE, there's a lot to manage.

Autoprefixer's value really becomes obvious when dealing with Flexbox. Flexbox is unique because it's not just vendor prefixes, but two previous specs that you need to manage. I really couldn't build a large site without it.


For playing around or to accompany tools/systems without an assets pipeline, Lea Verou's prefixfree[0] works very well, it does not require a compilation/munging phase and only generates the necessary prefixes for the browser it's run into. Really quite convenient.

[0] http://leaverou.github.io/prefixfree/


Sorry about that. When I first built this (many moons ago) it was unreasonably difficult to get it working in Safari. Sounds like it's time to revisit that issue.


I find myself very confused after getting to the align-items and align-content part. For those of us who prefer a more formal introduction, the guide on MDN seems pretty well written: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi...


This is a well executed tutorial. Bug: slide 32/53 reads

> [...] and click "resize flexbox".

The actual link reads "resize box", not "flexbox" --- I've been thoroughly enjoying working flexbox into frontend design. It really is what we've been missing. Slap autoprefixer into the flow and you have little to worry about if only targeting modern browsers.

The single-class oriented css toolkit Basscss.com has a flex-object module [1] that I've been getting miles out of lately. While it doesn't provide single classes for all flexible options, it's a good start and it's easy to add your own styles into the mix. Plus the documentation site itself is a great example of using flex. The Basscss author sort of operationalized Philip Walton's solved by flexbox stuff.

[1] http://www.basscss.com/docs/layout/#flex-object


I noticed the bug too. Wondering if the author meant to have us type something else in instead? Anyone have a fix for this from the user side, or is this just a problem with the program?

Thanks


Nice catch. I'll fix that. Thanks for posting about it here.


Great method of explaining flexbox — most non-interactive explanations end up looking like Mondrians (and convey approximately the same information). Unfortunately, this demo melts down in Safari, which still requires prefixing.


For some reason, it does have the very annoying behavior of resetting element height when altering align-items.


Yes, I ran into this bug as well.

Another small bug, slide 13: "...while we've got these three fixed-width items here, take a minute or two to explore the container styling options at the top of the page."

The container styling options are in the middle-right of the page, at least on my desktop browser.


What frameworks are making good strides in adopting flexbox for their grid systems?


If you made this site: You've got some console.log()s in there :)

Anyways so great to see this in action. I mean, one could also try this manually, but this is really nice.

PS: http://flexboxin5.com/scss/vendors/_animate.scss Failed to load resource: the server responded with a status of 404 (Not Found) main.js:1117 1


The first few times I tried to grapple with flexbox I just didn't get it - there were two competing specs, it was messy... now, it's fantastic. I've been using it on mobile projects and it's an absolute godsend to deal with different screen sizes efficiently.


This is a nice demo. The blurb about flex-basis should be corrected, though. It says on page 33 that flex-basis basically is a min-width for flex items, but instead flex-basis sets the default (main) size, not the minimum size.


Another Flexbox resource that i use almost daily is this one:

http://jonibologna.com/flexbox-cheatsheet/

Too bad Flexbox doesn't work in IE9 :(


I know of one specific very large US bank that is still on IE9. I think we go to IE11 this summer? Hopefully?


Out of curiosity, are you building a product that needs IE9 support? What industry?


I can think of lots of products/sites that could benefit from having IE9 support. E-commerce for instance, public services... anything that needs to have a far reach.

Still, quite a few options for what you can do without flexbox support ( polyfill / adjust design)


Journalism. Specifically newspapers. Around 2,3% of our readers still use IE9, which given the number of visitors, is quite a lot.


Flexbox + Autoprefixer = Win


This seems so well-intentioned! But I think maybe it doesn't always do what it is supposed to do. (It's hard to say -- I'm not quite sure what it is supposed to do!)


"Amazing! What used to require an entire suite of floats, media queries, and outright hacks, is acheived by adding one property to a container div!"

...or you can just set display: inline-block on the child elements... [1]

[1] http://jsfiddle.net/18fjgc0w/


Tried inline block a few times but find the spacing on inline elements (and the various workarounds[1]) a bit awkward and unpredictable.

[1] https://css-tricks.com/fighting-the-space-between-inline-blo...


> ...or you can just set display: inline-block on the child elements... [1]

Which requires various hacks or source-munging to remove word-spacing between your elements, and fix baseline spacing.


An article explaining CSS that seems to have completely broken CSS.


Mostly broken on Safari


Sorry about that. When I first built this (many moons ago) it was unreasonably difficult to get it working in Safari. Sounds like it's time to revisit that issue.




Applications are open for YC Winter 2018

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact

Search: