5 ms·

FlexBox Cheatsheet

227 points by mozillas 9y ago

pookieinc 9y 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 9y 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"!
amptorn 9y ago
Typically a cheat sheet should explain what the things mean.
- ghurtado 9y ago
  If it included detailed explanations it would be the opposite of a cheat sheet
  - freehunter 9y 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.
    - exodust 9y ago
      I agree, and for simply learning flexbox in 5 minutes (really it's that easy), I used: https://www.w3schools.com/css/css3_flexbox.asp https://www.w3schools.com/css/css3_flexbox.asp the "try it yourself" links are handy.
lukateake 9y ago
Someone here at HN once directed me to the resource so I'll do the same: https://flexboxfroggy.com/ https://flexboxfroggy.com/
lucasmullens 9y ago
The clipboard feature isn't working for me
Techowl 9y 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/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- toxican 9y 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.
patrickaljord 9y ago
How do I change values? I tried clicking but all I get is a notification saying it's been copied to clipboard.
McKayDavis 9y 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/ https://codepen.io/enxaneta/full/adLPwv/ It was the #1 most hearted pen of 2016: https://codepen.io/2016/popular/pens/10/ https://codepen.io/2016/popular/pens/10/
idibidiartists 9y 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 https://github.com/idibidiart/react-native-responsive-grid
- exodust 9y 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 9y 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.
bpierre 9y ago
My favorite one: http://apps.workflower.fi/css-cheats/?name=flexbox http://apps.workflower.fi/css-cheats/?name=flexbox
eriknstr 9y 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?
adjusted 9y ago
https://cvan.io/flexboxin5/ https://cvan.io/flexboxin5/ also help generate css
daurnimator 9y 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 9y ago
  The page loads jquery over http instead of HTTPS. If you're viewing the above link via HTTPS, jquery ($) won't load properly.
dmachinemoi 9y ago
wtf friends, why are we ingesting and highly rating such a quantity of flexbox explainers
crazysaem 9y ago
The flexbugs repository is also a good resource for browser specific flexbox issues: https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs
oDot 9y 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 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".
jamesxv7 9y ago
I learn more of Flexbox by reading https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b https://hackernoon.com/11-things-i-learned-reading-the-flexb... Great complement to mentioned articles.
superasn 9y 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.
wh4this 9y ago
A good FlexBox guide with images : http://cssreference.io/flexbox/ http://cssreference.io/flexbox/ I use it all the time while making websites, it is well explained.
exodust 9y 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 9y 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.
ikurei 9y 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/ 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.
joekrill 9y 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.
have_faith 9y ago
These animated flexbox examples serve me very well: https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35 https://medium.freecodecamp.com/an-animated-guide-to-flexbox... Highly recommend if you haven't memorised what each property does yet.
ggchappell 9y ago
Is this supposed to be doing something? Clicking the little up/down arrows changes the numbers, but that's all I see happening?

227 points by mozillas 9y 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 9y 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"!

amptorn 9y ago

Typically a cheat sheet should explain what the things mean.

ghurtado 9y ago
If it included detailed explanations it would be the opposite of a cheat sheet
- freehunter 9y 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.
  - exodust 9y ago
    I agree, and for simply learning flexbox in 5 minutes (really it's that easy), I used: https://www.w3schools.com/css/css3_flexbox.asp https://www.w3schools.com/css/css3_flexbox.asp the "try it yourself" links are handy.

lukateake 9y ago

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

lucasmullens 9y ago

The clipboard feature isn't working for me

Techowl 9y 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/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

toxican 9y 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.

patrickaljord 9y ago

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

McKayDavis 9y 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/ https://codepen.io/enxaneta/full/adLPwv/ It was the #1 most hearted pen of 2016: https://codepen.io/2016/popular/pens/10/ https://codepen.io/2016/popular/pens/10/

idibidiartists 9y 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 https://github.com/idibidiart/react-native-responsive-grid

exodust 9y 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 9y 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.

bpierre 9y ago

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

eriknstr 9y 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?

adjusted 9y ago

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

daurnimator 9y 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 9y ago
The page loads jquery over http instead of HTTPS. If you're viewing the above link via HTTPS, jquery ($) won't load properly.

dmachinemoi 9y ago

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

crazysaem 9y ago

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

oDot 9y 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 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".

jamesxv7 9y ago

I learn more of Flexbox by reading https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b https://hackernoon.com/11-things-i-learned-reading-the-flexb... Great complement to mentioned articles.

superasn 9y 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.

wh4this 9y ago

A good FlexBox guide with images : http://cssreference.io/flexbox/ http://cssreference.io/flexbox/ I use it all the time while making websites, it is well explained.

exodust 9y 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 9y 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.

ikurei 9y 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/ 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.

joekrill 9y 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.

have_faith 9y ago

These animated flexbox examples serve me very well: https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35 https://medium.freecodecamp.com/an-animated-guide-to-flexbox... Highly recommend if you haven't memorised what each property does yet.

ggchappell 9y ago

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