FlexBox Cheatsheet(vudav.github.io) |
FlexBox Cheatsheet(vudav.github.io) |
https://codepen.io/enxaneta/full/adLPwv/
It was the #1 most hearted pen of 2016:
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.
The golden rule of Flexbox layouts in those browsers seems to be "too much Flexbox breaks Flexbox"!
Great complement to mentioned articles.
Blocked loading mixed active content “http://code.jquery.com/jquery.js”[Learn More] vudav.github.io
ReferenceError: $ is not defined[Learn More]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.
flex-direction: row (The flexible items are displayed horizontally, as a row) is a cheatsheet. flex-direction: row is just a command.
See this as an example:
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.
https://medium.freecodecamp.com/an-animated-guide-to-flexbox...
Highly recommend if you haven't memorised what each property does yet.
I use it all the time while making websites, it is well explained.
https://www.w3schools.com/css/css3_flexbox.asp
the "try it yourself" links are handy.