[csswg-drafts] [css-flexbox] Add a `flex-clear` property (#3974)

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

== [css-flexbox] Add a `flex-clear` property ==
Flexbox spec: https://drafts.csswg.org/css-flexbox/

Back in the days of float based layout we had access to the `clear` property which allowed us to force a floated item onto a new row.

Now in the days of flexbox we don't have access to any sort of similar mechanic.

The place where this hurts the most is when `flex-direction: column;` is applied to a flex container.

When flex direction is set to `row` the container width is able to determine when items need to start wrapping. When flex direction is set to `column` the only way to make wrapping happen is by setting an explicit height on the container element. In general, any time you have a container with text inside it it, is a _very_ bad idea to apply a fixed height to that container.

----

My proposed solution to this issue is to introduce a `flex-clear` property.

Available values:
- **clear:** forces the target element into the next flex block (or creates a new flex block if one does not already exist)
- **none:** (default setting) element acts as it usually would as if the setting had never been applied

So in practice it looks like this:

```css
.flex-parent {
  display: flex;
  flex-direction: column;
}

.flex-child {
  width: 50%;
}

/* Force the 3rd flex child into a new column */
.flex-child:nth-child(3) {
  flex-clear: clear;
}
```

I've made a codepen to demonstrate
https://codepen.io/daniel-tonon/pen/PveNvV

![flex-clear-use-case](https://user-images.githubusercontent.com/10610368/58368488-22792300-7f31-11e9-964f-735eb754f912.png)

I'm trying to be reminiscent of the old float based `clear` property with the naming since they would kind of do similar things in the eyes of authors. I don't think a left/right distinction needs to be made though like what the original `clear` property has. The element will always just be placed into either the next, or a new flex block. `flex-direction` is what controls where that new flex-block would appear.

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

Received on Saturday, 25 May 2019 11:28:04 UTC