Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
Team Lincoln Loop has been blogging about flexbox (the CSS layout thing) every Friday for 2 months now!
- Week 1 – Introduction, basics, and lots of links to references.
- Week 2 – Changing the
@mediaquery. Transitioning the size of flex items.
- Week 3 – Aligning a set of tabs along the bottom with
align-items. Spacing out chunks with
- Week 4 – Changing the
orderof flex items to achive the correct visual result without affecting source order.
- Week 5 – Filterable content where both the nav and the content are layed out with flexbox. On smaller screen the letter navigation wraps into tight rows.
- Week 6 – The oft-forgotten inline variant of flexbox
- Week 7 – Variable width widgets forming a clean “masonry” style layout.
- Week 8 – Building a flexible sitemap completely with flexbox.
People just starting to learn web design now will perhaps never know the struggles that were float, just like some of us never really went through the tables-as-layout thing.