
Flexbox Cheatsheet - AllThingsSmitty
http://yoksel.github.io/flex-cheatsheet/
======
Bahamut
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

~~~
brlewis
and [https://flexboxfroggy.com/](https://flexboxfroggy.com/) for fun.

~~~
lambada
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
Thanks but not my site.

------
c-smile
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.

------
jwdunne
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
If you're looking for modernizr CDN, see
[https://cdnjs.com/libraries/modernizr](https://cdnjs.com/libraries/modernizr)

~~~
jwdunne
I believe this is an old version. For new versions, i think you have create a
custom build.

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

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

------
typeformer
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
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
Well JavaScript isn't really relevant here, but bootstrap v4 is using flexbox
now

------
soperj
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
This bug exists in IE11 as well. This is especially annoying when using
Boostrap 4 with flex grid system (although it's still alpha).

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

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

