[csswg-drafts] [css-flexbox] Feature: justify-balance: [top, equal, bottom, 3:6], j*-c*-[start,...,end] + a*-c*-[start,...,end] when more 3 rows/coloums (#10032)

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

== [css-flexbox] Feature: justify-balance: [top, equal, bottom, 3:6], j*-c*-[start,...,end] + a*-c*-[start,...,end] when more 3 rows/coloums ==
This is a suggestion not the final spec of properties of mechanics, they may be ways to further simply things, but this control would allow for a lot of things and further improvements call it hacks to another layout can be composed much more easily.

3 new additional properties for flex layout to be able to adjust the layout easier to what is desired for polishing off flex layout, and controlling the behaviour such that perfectly aesthetically pleasing, preventing the need to write JS or programming code external generators of HTML, CSS into the page. These properties will ensure everything is controlled from within the browser CSS specification. They're is better than the item break control mechanism for certain layouts when in the space of a [2-3]X[2-3] layout hacks for forms as well, so there are further added benefits at the low end of these settings as well, which make the combination of both of these even more powerful and simpler: https://github.com/w3c/csswg-drafts/issues/10031

Currently, when there are more than 2,3 rows of items on the main axis or 2,3 columns of items on the cross-sectional axis, there is no way of controlling, how polished off the layout for the 1st row and last row n-1 on the main axis and the cross axis of items, layout when compared to the general section.
These properties can still be applied when less the 3, like with a minimum of 2 rows or 2 columns.

I may have 10 rows and 4 columns, the first row, which is 40 items, but I only have 34 items.
This means the middle section can be full rows of 4 columns of items,
but when it comes to the first row and the last row, how should that be displayed
the remaining 2 items could be displayed on the top row or the last row, we probably want to be laid out differently,

- justify-balance can be set to control the remaining items that wouldn't cause the body/middle of the layout to be fully populated across its cross-sectional axis. These remaining partial items, can either be placed at the top of the bottom of the main section potentially.
justify-balance: top, bottom, equal, or a ratio/fraction of the top-to-bottom(leading/trailing) axis of items.

Currently justify-balance: top is how flex would currently work as a progressive algorithm, which does not require multiple passes for response rendering. 

The grid can be full on the main axis rows, and the cross-sectional axis: 4, so any overflow items, which would not form the main body, remaining 33-39 items would be controlled by justify-balance.

This together with new properties to control the first and last main/cross-section alignment gives endless possibilities
to what can be achieved.

- justify-content-start: controls the first main axis row: 1
- justify-content-end: controls the last main axis row: n-1
- align-content-start: controls the first main axis row: 1
- align-content-end: controls the last main axis row: n-1

The following possible values are all possible for the settings above.
flex-start, flex-end, flex-center, flex-space-between, space-around, stretch

There are going to arise many other simplifications to the existing ways of doing things and hacks as well for these properties,
which allows for simplifying HTML layouts in many cases, including form layouts.




Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10032 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:58:23 UTC