Re: [csswg-drafts] [css-contain-3] Define a syntax for state-based container queries (#6402)

Just to add some context / related links to @matthew-dean 's first post:

> So, like, there's a Switcher layout in the Every Layout library that, when content size is below a certain width, using flex-basis magic, it will change a 3-column layout to a single column layout w/ 3 items. It would be nice to query when this happens, because the Flexbox doesn't "know" when that flex layout happens, and we're now in a single column.

That is describing the _albatross hack_ where on first item wrapping, the intention is to set each flex item to the width of the flex container. Pictured here:

![Image](https://github.com/user-attachments/assets/af05e58d-fed1-4fc8-a15d-b4d58da2b854)

Here's the initial post describing the _first albatross hack_ and the problem it solves: https://heydonworks.com/article/the-flexbox-holy-albatross/

Here's the follow-up post showing the _simplified albatross hack_: <https://heydonworks.com/article/the-flexbox-holy-albatross-reincarnated/>

And here's a separate post breaking down the _albatross hack_, how it works, extending it, and it's limitations: <https://snook.ca/archives/html_and_css/understanding-the-flexbox-albatross>

---

> I don't know how to formulate this idea, but it would be nice to query state / behavior from things like Grid / Flexbox, particularly around things like:
> 
>     * Is this flexbox wrapped?
> 
>     * Which "row" of a flexbox am I in?
> 
>     * Which row or column of a Grid am I in?

Here is a list of common use cases where detecting whether a flexbox has wrapped would be useful: <https://ishadeed.com/article/flex-wrap-detect/>

Adding a way to detect flex-wrap removes the need for the albatross hack and wouldn't suffer from it's limitations either.

-- 
GitHub Notification of comment by spartanatreyu
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6402#issuecomment-2998836730 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 24 June 2025 05:11:53 UTC