Skip to main content
CSS is fun and cool and I like it.
Link

Holy Albatross with Widths

Link

Grid for layout, flexbox for components

Link

Chromium lands Flexbox gap

Link

Exciting Things on the Horizon For CSS Layout

Link

Flexbox and absolute positioning

Article

How Auto Margins Work in Flexbox

Robin has covered this before, but I’ve heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted to join the party. … Read article “How Auto Margins Work in Flexbox”

Article

The Thought Process Behind a Flexbox Layout

I just need to put two boxes side-by-side and I hear flexbox is good at stuff like that.

Just adding display: flex; to the parent element lays out the children in a row.

Well, that’s cool. I guess I could have floated them, but this is easier.

They should probably take up the full space they have though. Can I just stretch the parent to 100% wide? Well, I can, but that’s apparently not going to affect the child elements. … Read article “The Thought Process Behind a Flexbox Layout”

Article

Adaptive Photo Layout with Flexbox

Let’s take a look at a super lightweight way to create a horizontal masonry effect for a set of arbitrarily-sized photos. Throw any set of photos at it, and they will line up edge-to-edge with no gaps anywhere.

The solution is not only lightweight but also quite simple. We’ll be using an unordered list of images and just 17 lines of CSS, with the heavy lifters being flexbox and object-fit.… Read article “Adaptive Photo Layout with Flexbox”

Link

Overflow And Data Loss In CSS

Article

Making width and flexible items play nice together

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.… Read article “Making width and flexible items play nice together”