Skip to content

Issue 9

Flexbox, Responsive Design Patterns and layout thrashing.

Rachel Andrew
1 min read


Issue 9

This week I am off to France to speak about Grid Layout at Paris Web. I also have upcoming CSS Layout workshops planned - at Future of Web Apps in London and Falsy Values in Warsaw. I believe both still have some spaces available.

CSS Layout News


Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)

Zoe Gillenwater presented her talk on Enhancing Responsiveness with Flexbox at CSS Conf EU, here are the slides.

What forces layout / reflow?

All of the listed properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.

We spent a week making Trello boards load extremely fast. Here’s how we did it. - Fog Creek Blog

For a real-world example of how avoiding layout thrashing can speed up your application, read this post from the Fog Creek blog.

Experiment: Using Flexbox Today - Chris Wright

A post with some nice examples of Flexbox usage.


Flexbox Quote Bricks

A nice CodePen example of Flexbox used to display an image alongside a quote.

Patterns — Responsive Web Design

These are a series of patterns that are useful when putting together your website designs and solving difficult problems that people have already solved for you.

Our Sponsor

It doesn't have to be WordPress

It doesn't have to be WordPress

Perch has no themes, no built in mark-up, and has been designed to be lightening fast. See the difference by trying Perch today.