[csswg-drafts] [css-flexbox] Feature: Items-Limit-Height - Flex-Line - Main Size Determination (#10031)

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

== [css-flexbox] Feature: Items-Limit-Height - Flex-Line - Main Size Determination ==
I would like to propose an additional feature for flex, which allows us to abstractly control the Height of the main container which is set to display: flex in which the flex-items would be laided out. Typically one can only limit the height traditional with container style height property. Nowadays we typically design things to be independent of specific measurements of pixels, rem, em if possible, so they work for all devices. The natural design of height property in HTML is to keep expanding to contain its inner contents.

I would like to propose that a new property that allows us to control the height for flex items, 
in which the layout algorithm, would then allow items to be horizontally laid out as the height is softly constrained.
This property would take soft precedence over width of a container, basically cause a horizontal/film layout expansion. It must still abide by min-width of items forcing a horizontal expansion of items with min-width property set, would cause the items to no longer shrink and

The name of the property is not as important as the functionality, it is just a suggestion.

This functionality would allow for a lot of improvements in layout to be made, where by the Items-Limit-height
and existing algorithm would cause items to natural be capable of re-laying themselves out
as the screen size shrinks for mobile, extra.
I have few examples for flex and float I have assembled that cause natural collapsing into mobile layout.
Keeping the Title, Error Messages, (spacer) Input Control perfect for both input required display using before or after selectors.

This property would just make that and many other things a lot easier to achieve, they also take direction of text into account
for languages that are read from left to right and visa versus, where layouts will automatically change.

**Examples:**

**Naturally bounded by the browse display width and height natural unbounded**
.---------------.
1,,,,,,2,,,,,3,,,,,4
5,,,,,,6,,,,,7,,,,,8
9,,,,,10,,11,,,,12,
13,,14,,,15,,,16
.---------------.

**With the display:flex;Items-Limit-Height:2**
...............----------------................
1,,,,,2,,,,|,,3,,,,,4,,,,5,,,,6,,,|,7,,,,,,8
9,,,,10,,,|,11,,12,,13,,14,|,15,,16
..............-----------------...............


**With the display:flex;Items-Limit-Height:2;width:(100%,contain) + Each-Flex-Items:min-width:50% or min-width:contain**
In this case, Items-Limit + width, constrain the layout.

**_For few items:_**
.----------------.
,,,,,,1,,,,+,,,2, 
,,,,,,,,,,,,,3,  
.----------------.

**_For few items in which the min-width not set.:_**
.----------------.
.....1.....2.....3 
.....4.....5.....6 
.----------------.

**_For many items:_**
.----------------.
.....1.....+.....2, 
.....3,.....+.....4,
.....5.....+.....6,
.....7.....+.....8
.....9.....+....10,
.....11...+....12,
.....13...+....14,
.....15...+....16
.----------------.



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


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

Received on Tuesday, 5 March 2024 07:15:07 UTC