css-layouts-and-flexbox.md

CSS layouts and Flexbox

Outcome

You might understand: How box layouts work. (I still don't)

You will understand: How flexbox layouts work.

Why

The standard layout in HTML is weird. I still don't 100% understand it. I found even after many hours using standard layout I still sometimes struggled.

Flexbox is a newer way of laying things out that is far more sensible. I found after a couple of hours I could make any layout I wanted 99% of the time 😄

Advice

Couldn't find a perfect guide, these guides are pretty good but not perfect.

When something is prefixed with webkit- you shouldn't need to do that (that's how they prefix experimental webkit features)

Bare in mind which browsers flexbox supports

Learning materials

• Code School
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
• https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
• http://learnlayout.com/flexbox.html

Tasks

• Codeschool
• Flexbox Froggy
• https://docs.google.com/document/d/1XtgmPh_edSk_H-EUlhiyfurmlEkytNjZXdwBDgnNTIg/edit?usp=sharing