FlexBox Cheatsheet

227 points by mozillas 9 years ago | 32 comments

Techowl 9 years ago |

I've personally gotten a lot of value out of the CSS-Tricks flexbox guide [0]. It's visual, and sufficiently comprehensive.

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

toxican 9 years ago | |

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.

McKayDavis 9 years ago |

Since others are posting their favorite FlexBox resource, I'll post my goto link -- The FlexBox playground by Gabi on Codepen:

https://codepen.io/enxaneta/full/adLPwv/

It was the #1 most hearted pen of 2016:

https://codepen.io/2016/popular/pens/10/

pookieinc 9 years ago |

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.

ry_ry 9 years ago | |

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"!

lukateake 9 years ago |

Someone here at HN once directed me to the resource so I'll do the same: https://flexboxfroggy.com/

patrickaljord 9 years ago |

How do I change values? I tried clicking but all I get is a notification saying it's been copied to clipboard.

jamesxv7 9 years ago |

I learn more of Flexbox by reading https://hackernoon.com/11-things-i-learned-reading-the-flexb...

Great complement to mentioned articles.

joekrill 9 years ago |

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.

daurnimator 9 years ago |

Doesn't seem to do anything for me? ==> clicking does nothing (firefox). In JS console:

  Blocked loading mixed active content “http://code.jquery.com/jquery.js”[Learn More] vudav.github.io
  ReferenceError: $ is not defined[Learn More]

partifex 9 years ago | |

The page loads jquery over http instead of HTTPS. If you're viewing the above link via HTTPS, jquery ($) won't load properly.

exodust 9 years ago |

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.

joekrill 9 years ago | |

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.

bpierre 9 years ago |

My favorite one: http://apps.workflower.fi/css-cheats/?name=flexbox

amptorn 9 years ago |

Typically a cheat sheet should explain what the things mean.

ghurtado 9 years ago | |

If it included detailed explanations it would be the opposite of a cheat sheet

freehunter 9 years ago | | |

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.

ikurei 9 years ago |

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.

idibidiartists 9 years ago |

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.

See this as an example:

https://github.com/idibidiart/react-native-responsive-grid

exodust 9 years ago | |

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.

idibidiartists 9 years ago | | |

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.

have_faith 9 years ago |

These animated flexbox examples serve me very well:

https://medium.freecodecamp.com/an-animated-guide-to-flexbox...

Highly recommend if you haven't memorised what each property does yet.

superasn 9 years ago |

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.

ggchappell 9 years ago |

Is this supposed to be doing something? Clicking the little up/down arrows changes the numbers, but that's all I see happening?

oDot 9 years ago |

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".

eriknstr 9 years ago |

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?

crazysaem 9 years ago |

The flexbugs repository is also a good resource for browser specific flexbox issues: https://github.com/philipwalton/flexbugs

wh4this 9 years ago |

A good FlexBox guide with images : http://cssreference.io/flexbox/

I use it all the time while making websites, it is well explained.

adjusted 9 years ago |

https://cvan.io/flexboxin5/ also help generate css

lucasmullens 9 years ago |

The clipboard feature isn't working for me

dmachinemoi 9 years ago |

wtf friends, why are we ingesting and highly rating such a quantity of flexbox explainers