Entries tagged with “Flexbox”

Rebuilding the Leading Design grid

Last year when I worked at Clearleft, I built the website for Leading Design Conference. CSS Grid would have been the perfect approach for this, so I've recently rebuilt it in codepen...

Part 3: We might not need quantity queries thanks to Flexbox

I've learnt that we don't need quantity queries to create a balanced grid. Quantity queries are very powerful, but so is Flexbox. If we just want all the items in the last row to fill the space, regardless of how many there are, then Flexbox can take care of this...

Quantity queries and Flexbox part 2

A while ago, after reading Heydon Pickering's article on quantity queries, I had a go at it myself. I wrote a post on how we can use quantity queries in CSS to alter the width of items in a grid depending on their position in the grid. Since writing that post I've realised that I didn't use Flexbox or nth-child to their full potential. The CSS can be written more efficiently....

The new CSS Layout by Rachel Andrew

A great talk on Flexbox and Grids.

A grid-shaped Flexbox hole

I love Flexbox. All the sites I've worked on for the last year have little Flexbox enhancements scattered over them. I was feeling quite pleased with myself for a while, until I went too far. I fell down a grid-shaped Flexbox hole....

Flexbox Froggy

This game is awesome! A great way to learn flexbox.

Cool things we can do with CSS

​Today I shared my list of "Cool things we can do with CSS" at a brown bag lunch at Clearleft....

Don't forget about flex-shrink by Noah Blon

This is a great use of flexbox.

Flexbox in 5

This takes you through a series of steps to create flexbox layouts. I like the explanations that go with each step. A nice tool for learning the basics.


This is a playground for learning flexbox. I also like that it shows all of the vendor prefixes in the generated code.

Leveling Up With Flexbox (SmashingConf Oxford 2014)

A great talk by Zoe Mickley Gillenwater on learning Flexbox and how it can be used as progressive enhancement.

An equal height grid using Flexbox

I've been getting a little excited about Flexbox recently, so two weeks ago I wrote an introduction to it. Since then, I have experimented with Flexbox to solve a CSS problem that I used to see all the time when I first started working in web development ...

A guide to Flexbox - CSS Tricks

A great starting point for learning Flexbox.

With a spoonful of flexbox

​Flexbox is a smart layout module which offers a more efficient way of laying out items in a given space. One of the key strengths is it's ability to calculate space...