I second this one! It's the only resource I've needed and still use for flexbox. I've got most use cases committed to memory by now, but every now and then I need to visually see what I'm trying to do and quickly reference its code.
At our company, we semi-recently sunset our support for IE10, which has enabled all of our frontend guys to start redoing a lot of our app using flexbox. It's been one of the better decisions we've made. It's such a joy to use, reduced dozens (if not many more) lines of positioning code and has facilitated moving <divs> around so much easier. The only thing we've run into is adding "display:flex" to child elements, so that we can alter the contents direction and have rows / columns under the same parent (which has inevitably forced us to use "display:flex" all over the place).
I'm looking forward to when we can move to the CSS grid stuff personally, but at this point, we haven't due to less browser support for IE11. That and we're enjoying flexbox after many years of floats.
Whilst is awesome to be able to use flexbox quite freely IE11 and Safari still have a handful of slightly arcane issues, such as certain configurations of flex-wrap:wrap content requiring max-width:100% or flex-basis:auto to trigger the wrap rather than overflowing.
The golden rule of Flexbox layouts in those browsers seems to be "too much Flexbox breaks Flexbox"!
Is this just not working for me? I something supposed to be happening when I click the properties/values? Even if I allow the unsafe script that Chrome warns me about, all it does is copy something to the clipboard.
Quick question: are we/you using flexbox now even for critical areas such as navigation? I've been putting off using it for areas like top nav due to browser support, but surely now we can use it without worrying about fallbacks? I guess the answer is always "depends" with links to can-i-use, but wanted to hear opinions.
I love flexbox, it's what we all wanted back in the day... now it's here, it's motivating me to code some new responsive templates from scratch, and I'm blown away how well flexbox handles nice neat responsive columns. It plays nicely with other CSS too.
I have no problem using it in more "modern" projects. This is another case where IE is really holding things back. If you need support for IE9 or earlier it's really just not worth the trouble, in my opinion. Most other browsers have pretty decent support for it, though. So if you're OK with only supporting IE11 onward, I think it's totally fine to use.
But this has zero explanation. It's more like an appendix than a cheatsheet. It lists all the flexbox commands you can use, but doesn't say a single word about what it is.
flex-direction: row (The flexible items are displayed horizontally, as a row) is a cheatsheet. flex-direction: row is just a command.
This looks fantastic to learn what some of those mean, but just to save time when using flexbox I love this http://the-echoplex.net/flexyboxes/. It gives you all the code for what you set up. Every time I need flexbox, I use that and then tweak a few details, takes me a minute.
My experience with Flexbox is that it's a struggle to use it on its own for responsive behavior but is much easier when combined with percentage-based width, height and margins.
That's how it should be used anyway, I don't think anyone has ever suggested using Flexbox in isolation from other CSS methods such as percentage width.
For example sometimes you may want a 2-column layout only - so the items within the flexbox container only ever wrap once. Defining percentage width of those items, say 48% to allow for middle margin, is the only way I know to achieve this.
I've started using Flexbox after waiting a LONG time for it to become safely adopted. It's one of best things to happen to frontend dev in a long time. No excuses now not to make your own responsive template.
I meant it that I have learned to avoid using the relative size factor sizing (with flex-grow, flex-basis and flex-shrink) which is the default sizing model of Flexbox and have been using percentage baed sizing instead.
I miss the Hbox and Vbox of adobe Flex. They were so intuitive and i think i was able to manage almost all sorts of layout which Flexbox offers (ok, maybe not all but most) without ever once consulting the docs.
Flexbox is just fantastic. I use it in every project and it always makes things so easy. Helped A LOT when we built https://www.StockDroids.com and when I built a screenplay editor it did a great job with the magic of a "page within a page".
I somehow misread the title as Firefox Cheatsheet and was actually excited to see if there was some neat shortcut key combinations or settings that I didn't know of. So now that that's said, anyone got something like this to recommend?
0 - https://css-tricks.com/snippets/css/a-guide-to-flexbox/