Flexbox support for float-like avoidance behavior
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
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!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No repository file or test is named. Start by reviewing the proposed flow-around syntax and the stated Flexbox and shape-outside use cases, then determine the required specification scope and feasibility. Done would require an agreed direction for the feature, not a localized edit.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100