[css-flexbox] Feature: justify-balance: [top, equal, bottom, 3:6], j*-c*-[start,...,end] + a*-c*-[start,...,end] when more [2,3-*] rows/columns (Reordering and Accessibility/multi-form factor)

For the mailing list:

https://github.com/w3c/csswg-drafts/issues/10032


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.
it would also allow for a lot of improvement in the layout space of *Reordering
and Accessibility, multi-form factor* to be more easily specified and
improved upon https://www.w3.org/TR/css-flexbox-1/#order-property

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 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: #10031
<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.