Csswg-drafts: [css-flexbox-2] Add a `flex-clear` property

[Dan503]

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.

[Loirooriol]

In Firefox you can use break-before: always (or page) to achieve this. But it doesn't seem standard in non-paginated contexts. Though if CSS Break has break values for multi-column, why not for flexbox lines?

[fantasai]

@Loirooriol Gecko's current forced-break code is super broken. Whatever it does is probably a side-effect of its incredibly inane implementation.

Looks like we already thought of this at some point, just need to incorporate it into a Flexbox spec: https://www.w3.org/TR/css-text-4/#wrap-before :)

[MatsPalmgren]

(FYI, Gecko's current behavior is a known bug.)

[Dan503]

Looks like we already thought of this at some point, just need to incorporate it into a Flexbox spec: https://www.w3.org/TR/css-text-4/#wrap-before :)

@fantasai does that mean that this is already possible using the wrap-before and wrap-after properties?

[SebastianZ]

Looks like we already thought of this at some point, just need to incorporate it into a Flexbox spec: https://www.w3.org/TR/css-text-4/#wrap-before :)

@fantasai does that mean that this is already possible using the wrap-before and wrap-after properties?

It is obviously specified, though no browser implements those two properties yet.

Sebastian

[SebastianZ]

Looks like we already thought of this at some point, just need to incorporate it into a Flexbox spec: https://www.w3.org/TR/css-text-4/#wrap-before :)

Maybe wrap-before and wrap-after could also apply to auto-placed grid items to allow forcing them to be placed in the next grid track.

Should that be discussed in a separate issue?

Sebastian