Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-flexbox-2] Add a flex-clear property #3974

Open
Dan503 opened this issue May 25, 2019 · 6 comments
Open

[css-flexbox-2] Add a flex-clear property #3974

Dan503 opened this issue May 25, 2019 · 6 comments

Comments

@Dan503
Copy link

Dan503 commented May 25, 2019

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

flex-clear-use-case

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.

@Dan503 Dan503 changed the title [css-flexbox] Add a flex-clear property [css-flexbox-2] Add a flex-clear property May 25, 2019
@Loirooriol
Copy link
Contributor

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
Copy link
Collaborator

@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
Copy link

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

@Dan503
Copy link
Author

Dan503 commented May 26, 2019

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
Copy link
Contributor

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants