[csswg-drafts] Flexbox support for float-like avoidance behavior (#12911)

Merci-chao has just created a new issue for https://github.com/w3c/csswg-drafts:

== Flexbox support for float-like avoidance behavior ==
In current CSS, `float` allows content to wrap around elements, but it doesn't integrate with Flexbox. I propose a new feature for Flexbox layout where flex items can automatically avoid specified regions during layout.

### Use Cases
- Floating sidebars within a flex container
- Avoiding ad blocks or overlays
- Creating dynamic layouts that adapt to anchored elements

### Possible Syntax Ideas
```css
.flexbox {
  flow-around: rect(0 10% 10% 0), 
               rect(0 100% 10% 90%);
}
```

This behavior would allow Flexbox to support more fluid and responsive layouts, similar to how `shape-outside` enables text to wrap around shapes. However, unlike `shape-outside`, this would apply to box-level elements, not just inline text.

Would love to hear thoughts on feasibility and potential directions. Thank you!

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12911 using your GitHub account


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

Received on Wednesday, 8 October 2025 03:53:41 UTC