If you hadn’t seen it, Heydon posted a rather clever flexbox layout pattern that, in a sense, mimics what you could do with a container query by forcing an element to stack at a certain container width. I was particularly interested, as I was fighting a little layout situation at the time I saw this and thought it could be a solution. Let’s take a peak.
“Ad Double” Units
I have these little advertising units on the design of this site. I can and do insert them into a variety of places on the site. Sometimes they are in a column like this:
Sometimes I put them in a place that is more like a full-width environment:
And sometimes they go in a multi-column layout that is created by a flexible CSS grid.
So, really, they could be just about any width.
But there is a point at which I’d like the ads to stack. They don’t work side by side anymore when they get squished in a narrow column, so I’d like to have them go over/under instead of left/right.
I don’t care how wide the screen is, I care about the space these go in
I caught myself writing media queries to make these ads flop from side by side to stacked. I’d “fix” it in one place only to break it in another because that same media query doesn’t work in another context. I needed a damn container query!
This is the beauty of Heydon’s albatross technique. The point at which I want them to break is about 560px, so that’s what I set out to use.
I was already using flexbox to lay out these Ad Doubles, so the only changes were to make it wrap them, put in the fancy 4-property albatross magic, and adjust the margin handling so that it doesn’t need a media query to reset itself.
This is the entire dif:
And it works great!
Peeking at it in Firefox DevTools
Victoria Wang recently wrote about designing the Firefox DevTools Flexbox Inspector. I had to pop open Firefox Developer Edition to check it out! It’s pretty cool!
The coolest part, to me, is how it shows you the way an individual flex item arrives at the size it’s being rendered. As we well know, this can get a bit wacky, as lots of things can affect it like
Here’s what the albatross technique shows:
I love the innovation! And I’ll probably just use a Media Query, myself. I would be really confused and perhaps disturbed if I inherited a site that used this tactic for such a seemingly simple process. But still awesome to see what the latest in CSS layout technology can offer us.
Kinda the point is that there is no media query that can do what this does, at least yet.
This is a game changer! I wished for a media queries for content width since a long time and I think, thas this technique will do the job very fine :)
No Media query trend, may be the good approach for now. In my opinion this is confusing and I would rather stick to resize observer when I can. Declarative approach with webcomponents would be my solution.
I have the same problem with fluid typography on the web. Nobody can understand this smart code after a while.
Those fluid typography tricks are to
cubic-bezieris to transition or animation timing function. Sure it would help if those tricks were standardized somehow, eg.
font-size: linear-font-size(30rem, 1rem, 75rem, 1.2rem)or more simply
linear(x1: from this viewport width, y1: from this font size, x2: to this viewport width, y2: to this font size). Visualizing the function curve on an x/y axis is a good way to remember how it works, as for cubic-bezier. A lot of native CSS functions or values are also hiding complex math, like blend modes and filters.
I’m just defending those fluid typography tricks. I’m not trying to prove that I can understand smart code after a while and you don’t. :)
Read Heydon’s article the other day. Very articulate and even more helpful. Total game changer until we have native container queries.
Hey Chris, couldn’t you just achieve this by setting ‘flex: 1 280px;’ (or appropriate pixel value) on your ad units? It seems that the ‘flexbox albatross’ would really only be useful for 3+ flex items, unless I’m missing something.
HMMMMM I THINK YOU MIGHT BE RIGHT. Leave it to me to overthink it. I’ll have a play with that as soon as I can, but yeah I think you’re right with just 2 elements that can grow but not shrink it should be a lot easier to make them break right at a minimum and when the flex fill the new space.
weird flex but ok
How about using Grid for this? The min column value will work as our breakpoint. That’s what I would do maybe.
I made a scss mixin using this technique.
Now if only there was a way to do this for srcset…
Can this technique to work with non-equal columns?