[css-flexbox-2] 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). Flex items that follow are placed after the flex-clear: clear item in the same flex block until another flex block is created.
• none: (default setting) element acts as it usually would as if the setting had never been applied

If flex-wrap is set to nowrap, this property should have no effect.

So in practice it looks like this:

.flex-parent {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; /* flex-wrap must not be set to "nowrap" */
}

.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

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.

Start with the CSS Flexbox specification linked in the issue and review the proposed flex-clear behavior against existing wrapping and flex-direction rules. There are no repository files or tests named; the work is done when the Working Group resolves the design and records an agreed specification change, including behavior for nowrap.