Flexbox support for float-like avoidance behavior

[Merci-chao]

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

.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!