The Really Ultimate Flexbox Cheatsheet and Recommended FED Training

Lately I started working at BigPanda, and switched sides from backend developer who knows a bit* front end, to full stack who does mostly front end, and I did two really great workshops at my training.

The first was for flexbox — before, CSS was kind of my nightmare, querying Google on it rarely yielded relevant result for more than basic cases, and the logic of if was never clear to me. During and after this tutorial it felt much better.

This is it: and this is the summary of it:

justify-content — horizontally.
flex-start / flex-end / center / space-between / space-around
align-items — vertically
flex-start / flex-end / center / baseline / stretch
flex-direction — row/column
row / row-reverse / column / column-reverse
order —number
align-self — like align-items but for single item.
nowrap / wrap / wrap-reverse
flex-flow — combination of flex-direction and flex-wrap
align-content — for the rows
flex-start / flex-end / center / space-between / space-around / stretch

The second tutorial I did was implementing first in vanilla JavaScript (took three work days), then in jQuery (1.5 work days), and eventually with AngularJS (1.5 work days). My implementation is here — obviously not the greatest piece of code of mine, but great for reference. This exercise introduced me with real life concepts to learn and was very effective.

  • By ‘a bit’ I mean that I knew about the basic HTML structure — everything inside <html></html>, there’s the <head></head> where they mostly import css and JS scripts, and the <body></body> where all the content layout is done. I knew a bit more complex things about HTML such as that the div takes 100% of its parent’s row and span is smaller. That the JS can also sit inside the HTML file but it’s not a good practice. I knew and appreciated Bootstrap and basic CSS attributes, and jQuery selectors and basic use. This knowledge came from helping out at a very small startup I worked at a few years ago when the need in the client-side was greater than the server-side, and from side-projects and hackathons I participated at. Also I did this AngularJS course two years ago, it’s still considered very good.