Flexbox in 5 minutes
flexboxin5.com
flexboxin5.com
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.
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.
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
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.
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, ...)
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/
I would disagree here, there is another great resource online for 2 years and showing up as #1 on Google when searching:
https://www.polymer-project.org/docs/polymer/layout-attrs.ht...
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 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.)
> why do these two separate properties exist?
Because they don't behave identically: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Why did I wait?
http://stackoverflow.com/questions/28563384/flex-basis-webki...
Hopefully the day will soon come when I don’t have to refer to it.
is there any hope that Microsoft will make their new Browser evergreen???
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
Then ask whether you really require cookies. What value do they add?
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.
Am I missing something, or is there an error/omission in the instructions?
Chrome 41.0.2272.76 m
So in this case the width for "2" would be: 2 * (available_width / (1 * other_items + 2))
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.
> [...] 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.
Thanks
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.
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
http://jonibologna.com/flexbox-cheatsheet/
Too bad Flexbox doesn't work in IE9 :(
Still, quite a few options for what you can do without flexbox support ( polyfill / adjust design)
...or you can just set display: inline-block on the child elements... [1]
[1] https://css-tricks.com/fighting-the-space-between-inline-blo...
Which requires various hacks or source-munging to remove word-spacing between your elements, and fix baseline spacing.