Several flexbox items this week and some nice worked examples of useful layout patterns. If you code up something useful and have a CodePen or similar link to share - let me know. Likewise with tutorials or anything else related to layout. It's nice to get a balance of cutting edge and emerging techniques alongside information for CSS beginners.
A last plug for the workshop I am running in London next Monday. This is currently the only UK open workshop I have scheduled, so if you fancy a day learning layout with me book your ticket here.
Rachel Andrew, CSS Layout News
From Chrome 52, Chrome will be updating the behaviour of absolutely positioned items in flex containers to match the updated spec. If you know you have layouts that use abspos, it would be worth checking them in Canary, where you can already see the change.
Dealing with flexbox inconsistencies and waiting for Grid Layout from Charlotte Jackson.
An article detailing how to use the Chrome Developer tools to test and fix layout issues.
Here is a nice tutorial on laying out a design using flexbox that also explains why each part of the layout works. Nicely done!
A nice walkthrough of how to use flexbox to display a roadmap which makes the point:
"Flexbox is often described as scary and difficult to grasp, but this I think is a decent example of how to use the defaults of Flexbox to your advantage. In fact, the only flex property we really need is the display: flex; and it just magically works. Everything else is smart styling, pseudo elements, counters etc."
This is most often my experience with these new layout methods. They enable a much lighter touch than we are used to.
It's conference season and I spotted this CodePen collection of flexbox examples via a tweet on the #FITCSpotlight conference hashtag.
A nice technique for "punch-out" avatars from Adrian Roselli.
A post from Vitaly on Smashing Magazine detailing some of the more obscure and specialist responsive design patterns we might need to deal with, including a car configuration tool.
Over 200 minutes of video and 70+ individual lessons plus a Slack community! The complete CSS Layout course takes you through the methods that work in current and older browsers, to new techniques that have good support in modern browsers, and even explores those things we'll be using in the near future.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.