Re: [csswg-drafts] [css-sizing-4] Consider adding `stretch(weight)` size (#8267)

@Loirooriol You ask good questions. I will try to answer them here, as well as outline a revised proposal based on your insight and some further thinking on my part:

> Can you clarify your usecase? In flexbox you can already use flex-grow, and in grid you can size the tracks with fr units... Why not use flex instead?

The purpose here is for the most part not to add new capabilities, but to make existing ones ("stretch to take up available space") more intuitive and easier to specify. Having said that, the system I have adapted this model allows the proposed function/unit to be used for margins as well as widths/heights. And that does give an extra capability: the ability to specify both widths/heights and margins to take up a proportion of available space, and to have those proportions resolve simultaneously such that one can specify margins and widths/height in proportion to each other. I believe that is not currently possible in the CSS model.

> Do you want this for inline-blocks? For block boxes along the block axis?

If this can be backwards compatibly specified to enable usage in block boxes then I think that would be a great addition. It would be a good solution to the confusing inconsistency with block boxes that auto margins apply to the inline axis but not the block axis. However, I am unfamiliar with the reason that this is specified this way (whether it's just a historical compatibility thing, or whether there is some difficulty in applying auto margins in the block axis). I would be pretty happy even if this proposal was only adopted for `grid` and `flex` contexts.

> And rather than a new function, it may be better to just accept fr units, like in grid or stripes()
This is a very good point. I initially saw the connection with the system I am proposing to `stretch`. I have now realised that `fr` units *also* expose very similar functionality where they are allowed. And additionally that auto margins (`margin: auto`) are a third feature exposing very similar functionality. My new proposal below uses the `fr` unit syntax, and suggests a way to unify `fr` units, `stretch` and auto margins into a single concept.

## New Proposal

My new proposal is to enable the use of `fr` units in the following places:

- `width`/`height` (but not min or max sizes)
- `margin`
- `padding` (this could one could potentially be left out, or postponed until later)

More specifically:

- The semantics of those units would be the same as the semantics of `fr` units in grid templates: "they initially resolve to an automatic minimum size, then stretch to fill available space once all siblings have been sized.
- The automatic minimum size for margin, padding, and inset would be 0.
- Like in the case of grid template definitions, space would be taken up in proportion to the to the value specified (`2fr` will take up twice as much space as `1fr`.
- The layout phase in which the stretching to fill available space happens would be the same phase in which auto margins are resolved (so after other sizing, but just prior to alignment).
- `margin: auto` would be defined to be equivalent to `1fr`
- The `stretch` keyword as applied to width/height would also be defined to be equivalent to `1fr`
- In the case of an indefinitely sized container (or a definitely sized container that is smaller than it's contents prior to stretching) no stretching would occur and the automatic minimum size would be taken.
- Padding would participate in the inner layout of a box with `box-sizing: border-box`, and the outer-layout (like margins) of a box with `box-sizing: content-box`. This isn't especially useful in the `content-box` case. But with `border-box` it provides a super easy solution to centering content within a box: you would be able to specify `padding: 1fr` on the container and that would be it.

Additionally, I would like to push for the adoption of a new unit that is equivalent to `minmax(0, _fr)` (as already proposed in https://github.com/w3c/csswg-drafts/issues/2677). This would be equivalent to the `fr` unit when applied to `margin` or `padding`, but when applied to `width`, `height`, or used in a grid template it would have effect of setting the content size to zero in the relevant axis.  I think the name `efr` for "Equal Fraction" proposed in #2677 works well. Alternatively I had come with name `frz` for "Fraction Zero". I can see this being very widely used with `fr` becoming the exception where you do want content size to be taken into account.

## Example 

With these two proposals use of "available space" becomes highly intuitive. For example, consider a use case for flexbox "one fixed/content sized element and two element that each take up half the remaining space". Currently that would be implemented as something like:

```html
<div style="display: flex; flex-direction: column">
    <div style="flex: 0 0 auto"></div>
    <div style="flex: 1 1 0px"></div>
    <div style="flex: 1 1 0px"></div>
</div>
```

But it could become

```html
<div style="display: flex; flex-direction: column">
    <div style="height: auto"></div>
    <div style="height: 1efr"></div>
    <div style="height: 1efr"></div>
</div>
```

-- 
GitHub Notification of comment by nicoburns
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8267#issuecomment-1375548491 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 9 January 2023 12:22:22 UTC