6 ms·

Flexbox Cheatsheet

bigmanwalter 10y ago
Great resource I'll be sure to use it :) Are you using a theme or is it custom made? It's really nice!
Bahamut 10y ago
I always viewed https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ as the definitive flexbox resource, and https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs for browser specific issues
- fredleblanc 10y ago
  While CSS Tricks certainly is a lot more thorough, I've always found the "throw stuff at the wall" ordering of content (a la Pinterest) to be confusing for things where I probably need to find something specific, or want to read things in order. I think that's where this resource can come in handy.
- aphextron 10y ago
  Thanks for this. I haven't kept up to date on my CSS. Great to know flexbox is fully supported across the board now.
  - deleted 10y ago
    [deleted]
- brlewis 10y ago
  and https://flexboxfroggy.com/ https://flexboxfroggy.com/ for fun.
  - lambada 10y ago
    FYI: I get an invalid certificate warning. Looks like it's presenting the github wildcard certificate, rather than a certificate with your domain in.
    - brlewis 10y ago
      Thanks but not my site.
- ibejoeb 10y ago
  Same. Separating the container from the items makes it easier to grok. A lot of the browser bugs arise in deeply nested containers, so judicious use has saved a lot of legacy design headache and still allowed me to roll it out with very good support on desktop and mobile.
- brryant 10y ago
  There's also this slightly more visual approach to learning flexbox: https://www.flexboxgame.com/ https://www.flexboxgame.com/
  - mos_basik 10y ago
    Whoa, that was much more effective than I thought it was going to be. The first impression from the tool sidebar is overwhelming, but patterns quickly emerge and you can pick up speed fast. It's very satisfying to see layouts "just work" through the application of one or two simple but descriptive commands.
soperj 10y ago
The one annoying thing is that there is a bug in safari. You can't do a flex-basis of a % if you want it to work.
- darekkay 10y ago
  This bug exists in IE11 as well. This is especially annoying when using Boostrap 4 with flex grid system (although it's still alpha).
amelius 10y ago
I still wonder why we have display: flex and display: inline-flex It seems to me that the committee who designed this has been confusing what is happening inside the box (flex or not) with what is happening outside the box (inline or block). Those two behaviors should be orthogonal, IMHO.
- Rumudiez 10y ago
  Truly there should be no use case for the "inline-" prefixed properties anymore. Your HTML+CSS systems should denote layout strictly from parents ("cascading!") and any exceptions to your rules would exhibit either an unsatisfactory rule or an inconsistent design.
  - ezequiel-garzon 10y ago
    It's interesting (and reasonable) that cascade has become synonymous with inheritance, while the standard defines it as the process that looks at importance and origin, followed (if necessary) by specificity, followed by order: https://www.w3.org/TR/CSS22/cascade.html#cascade https://www.w3.org/TR/CSS22/cascade.html#cascade
    - Rumudiez 10y ago
      In my usage I meant to express that a modern system should be constructed similarly to how flexbox and grid determine the "display" property of the selected element's children. If your code constantly requires manual display:inline-block; on elements (and it's not just to override the browser's default stylesheet), then you probably aren't adhering to a consistent pattern and your CSS's maintainability will eventually drop off at an exponential rate. Flexbox enables you to even avoid patterns like .inline-list>li{float:left;}, so sibling-level specificity isn't going to align with best practices anymore in the near future.
      - ezequiel-garzon 10y ago
        Oh, I agree with your comment. I guess I should have quoted the part that led to my rather off-the-topic remark: parents ("cascading!") I wonder whether the people who coined the term CSS also had in mind cascading as related to inheritance, or maybe even only this meaning, and later the standards "lawyers" tied the term cascade to the definition I cited. Thanks for replying.
c-smile 10y ago
Just for the history... At early stages of flexbox idea discussion I proposed (at W3C's www-style WG) it to be implemented in form of two entities: The flow property describing children layout manager: flow:default|vertical|horizontal|horizontal-wrap|vertical-wrap|grid... and flex length units, describing "spring power" used by the property. width:1*; margin-left:2* for example. https://sciter.com/docs/flex-flow/flex-layout.htm https://sciter.com/docs/flex-flow/flex-layout.htm That schema has very simple physical model that does not require any need for cheatsheets - very simple. Just to walk over illustrations in the document above to get the idea. Current (accepted) flexbox variant is too controversial IMO. Yet breaks existing CSS box model somehow, what would be the used box width in this case: div { flex: 1; width:100px; } two properties compete for the same entity (width of the box) - basic architectural error IMHO.
fournm 10y ago
This got my hopes up that flex-basis: content was working in more places.
typeformer 10y ago
I bookmarked this and thank you for posting it! As a Webflow user it is really nice to have a clear visual guide to the underlying CSS so I understand exactly what is happening especially when I break something.
manishsharan 10y ago
Could someone please recommend a javascript library that allow one to use flexbox without requiring a deep knowledge of idiosyncrasies of different implementations of Flexbox ?
- fuhrysteve 10y ago
  Well JavaScript isn't really relevant here, but bootstrap v4 is using flexbox now
jwdunne 10y ago
My flexbox story: I decided to use flexbox. Everything was wonderful - responsive sizing was perfect. So easy to use. I then tried it on Safari. First port of call: older versions of Safari don't calculate widths based on min / max width property but rather a flex specific property (can't remember which). Didn't work. Tried a polyfill - the polyfill landscape for flexbox is shockingly bad. At this point, I'd give up hope. I turn to Modernizr so I can fall back to display table. Got this set up (modernizr only really does custom builds apparently, no CDN now). Surprise. Safari was flagging up with modern flexbox support. The autoprefixer I used set the WebKit vendor prefix to use legacy flexbox. Chrome uses the non prefixed property fine. Other browsers were fine. Safari was still using the vendor prefix. Fin. tl;dr flexbox embarrassed me.
- carld 10y ago
  If you're looking for modernizr CDN, see https://cdnjs.com/libraries/modernizr https://cdnjs.com/libraries/modernizr
  - jwdunne 10y ago
    I believe this is an old version. For new versions, i think you have create a custom build.
jaequery 10y ago
bring back tables with some responsive behaviour and we can call it a day

Great resource I'll be sure to use it :) Are you using a theme or is it custom made? It's really nice!

I always viewed https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ as the definitive flexbox resource, and https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs for browser specific issues

fredleblanc 10y ago
While CSS Tricks certainly is a lot more thorough, I've always found the "throw stuff at the wall" ordering of content (a la Pinterest) to be confusing for things where I probably need to find something specific, or want to read things in order. I think that's where this resource can come in handy.
aphextron 10y ago
Thanks for this. I haven't kept up to date on my CSS. Great to know flexbox is fully supported across the board now.
- deleted 10y ago
  [deleted]
brlewis 10y ago
and https://flexboxfroggy.com/ https://flexboxfroggy.com/ for fun.
- lambada 10y ago
  FYI: I get an invalid certificate warning. Looks like it's presenting the github wildcard certificate, rather than a certificate with your domain in.
  - brlewis 10y ago
    Thanks but not my site.
ibejoeb 10y ago
Same. Separating the container from the items makes it easier to grok. A lot of the browser bugs arise in deeply nested containers, so judicious use has saved a lot of legacy design headache and still allowed me to roll it out with very good support on desktop and mobile.
brryant 10y ago
There's also this slightly more visual approach to learning flexbox: https://www.flexboxgame.com/ https://www.flexboxgame.com/
- mos_basik 10y ago
  Whoa, that was much more effective than I thought it was going to be. The first impression from the tool sidebar is overwhelming, but patterns quickly emerge and you can pick up speed fast. It's very satisfying to see layouts "just work" through the application of one or two simple but descriptive commands.

soperj 10y ago

The one annoying thing is that there is a bug in safari. You can't do a flex-basis of a % if you want it to work.

darekkay 10y ago
This bug exists in IE11 as well. This is especially annoying when using Boostrap 4 with flex grid system (although it's still alpha).

amelius 10y ago

I still wonder why we have display: flex and display: inline-flex It seems to me that the committee who designed this has been confusing what is happening inside the box (flex or not) with what is happening outside the box (inline or block). Those two behaviors should be orthogonal, IMHO.

Rumudiez 10y ago
Truly there should be no use case for the "inline-" prefixed properties anymore. Your HTML+CSS systems should denote layout strictly from parents ("cascading!") and any exceptions to your rules would exhibit either an unsatisfactory rule or an inconsistent design.
- ezequiel-garzon 10y ago
  It's interesting (and reasonable) that cascade has become synonymous with inheritance, while the standard defines it as the process that looks at importance and origin, followed (if necessary) by specificity, followed by order: https://www.w3.org/TR/CSS22/cascade.html#cascade https://www.w3.org/TR/CSS22/cascade.html#cascade
  - Rumudiez 10y ago
    In my usage I meant to express that a modern system should be constructed similarly to how flexbox and grid determine the "display" property of the selected element's children. If your code constantly requires manual display:inline-block; on elements (and it's not just to override the browser's default stylesheet), then you probably aren't adhering to a consistent pattern and your CSS's maintainability will eventually drop off at an exponential rate. Flexbox enables you to even avoid patterns like .inline-list>li{float:left;}, so sibling-level specificity isn't going to align with best practices anymore in the near future.
    - ezequiel-garzon 10y ago
      Oh, I agree with your comment. I guess I should have quoted the part that led to my rather off-the-topic remark: parents ("cascading!") I wonder whether the people who coined the term CSS also had in mind cascading as related to inheritance, or maybe even only this meaning, and later the standards "lawyers" tied the term cascade to the definition I cited. Thanks for replying.

c-smile 10y ago

Just for the history... At early stages of flexbox idea discussion I proposed (at W3C's www-style WG) it to be implemented in form of two entities: The flow property describing children layout manager: flow:default|vertical|horizontal|horizontal-wrap|vertical-wrap|grid... and flex length units, describing "spring power" used by the property. width:1*; margin-left:2* for example. https://sciter.com/docs/flex-flow/flex-layout.htm https://sciter.com/docs/flex-flow/flex-layout.htm That schema has very simple physical model that does not require any need for cheatsheets - very simple. Just to walk over illustrations in the document above to get the idea. Current (accepted) flexbox variant is too controversial IMO. Yet breaks existing CSS box model somehow, what would be the used box width in this case: div { flex: 1; width:100px; } two properties compete for the same entity (width of the box) - basic architectural error IMHO.

fournm 10y ago

This got my hopes up that flex-basis: content was working in more places.

typeformer 10y ago

I bookmarked this and thank you for posting it! As a Webflow user it is really nice to have a clear visual guide to the underlying CSS so I understand exactly what is happening especially when I break something.

manishsharan 10y ago

Could someone please recommend a javascript library that allow one to use flexbox without requiring a deep knowledge of idiosyncrasies of different implementations of Flexbox ?

fuhrysteve 10y ago
Well JavaScript isn't really relevant here, but bootstrap v4 is using flexbox now

jwdunne 10y ago

My flexbox story: I decided to use flexbox. Everything was wonderful - responsive sizing was perfect. So easy to use. I then tried it on Safari. First port of call: older versions of Safari don't calculate widths based on min / max width property but rather a flex specific property (can't remember which). Didn't work. Tried a polyfill - the polyfill landscape for flexbox is shockingly bad. At this point, I'd give up hope. I turn to Modernizr so I can fall back to display table. Got this set up (modernizr only really does custom builds apparently, no CDN now). Surprise. Safari was flagging up with modern flexbox support. The autoprefixer I used set the WebKit vendor prefix to use legacy flexbox. Chrome uses the non prefixed property fine. Other browsers were fine. Safari was still using the vendor prefix. Fin. tl;dr flexbox embarrassed me.

carld 10y ago
If you're looking for modernizr CDN, see https://cdnjs.com/libraries/modernizr https://cdnjs.com/libraries/modernizr
- jwdunne 10y ago
  I believe this is an old version. For new versions, i think you have create a custom build.

jaequery 10y ago

bring back tables with some responsive behaviour and we can call it a day