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 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.
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.
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.
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':
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.
> 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.
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.
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.
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:
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.
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.
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.
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?
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?
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.
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.
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.
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?
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.
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.
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.
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)
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!)
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.
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.