I've personally gotten a lot of value out of the CSS-Tricks flexbox guide [0]. It's visual, and sufficiently comprehensive.<p>0 - <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a>
Since others are posting their favorite FlexBox resource, I'll post my goto link -- The FlexBox playground by Gabi on Codepen:<p><a href="https://codepen.io/enxaneta/full/adLPwv/" rel="nofollow">https://codepen.io/enxaneta/full/adLPwv/</a><p>It was the #1 most hearted pen of 2016:<p><a href="https://codepen.io/2016/popular/pens/10/" rel="nofollow">https://codepen.io/2016/popular/pens/10/</a>
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).<p>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.
Someone here at HN once directed me to the resource so I'll do the same: <a href="https://flexboxfroggy.com/" rel="nofollow">https://flexboxfroggy.com/</a>
I learn more of Flexbox by reading <a href="https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b" rel="nofollow">https://hackernoon.com/11-things-i-learned-reading-the-flexb...</a><p>Great complement to mentioned articles.
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.
Doesn't seem to do anything for me? ==> clicking does nothing (firefox). In JS console:<p><pre><code> Blocked loading mixed active content “http://code.jquery.com/jquery.js”[Learn More] vudav.github.io
ReferenceError: $ is not defined[Learn More]</code></pre>
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.<p>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.
This looks fantastic to learn what some of those mean, but just to save time when using flexbox I love this <a href="http://the-echoplex.net/flexyboxes/" rel="nofollow">http://the-echoplex.net/flexyboxes/</a>. 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.<p>See this as an example:<p><a href="https://github.com/idibidiart/react-native-responsive-grid" rel="nofollow">https://github.com/idibidiart/react-native-responsive-grid</a>
These animated flexbox examples serve me very well:<p><a href="https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35" rel="nofollow">https://medium.freecodecamp.com/an-animated-guide-to-flexbox...</a><p>Highly recommend if you haven't memorised what each property does yet.
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 <a href="https://www.StockDroids.com" rel="nofollow">https://www.StockDroids.com</a> 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?
The flexbugs repository is also a good resource for browser specific flexbox issues: <a href="https://github.com/philipwalton/flexbugs" rel="nofollow">https://github.com/philipwalton/flexbugs</a>
A good FlexBox guide with images : <a href="http://cssreference.io/flexbox/" rel="nofollow">http://cssreference.io/flexbox/</a><p>I use it all the time while making websites, it is well explained.