[css-flexbox] Proposal 8.2. Axis Alignment: the justify-content property, aulixary wrap components

[wesleyolis]

https://drafts.csswg.org/css-flexbox/#propdef-justify-content
8.2. Axis Alignment: the justify-content property
8.3. Cross-axis Alignment: the align-items and align-self properties

Proposal, have secondary component for each of the above mentioned attributes when
'flex-wrap' setting is active. The secondary component will control how the items will be aligned
using the remaining row-space, if the items didn't fully utilize all the space.
This has applications typically for the last wrapped row, however, their could be 3 versions. start-row, middle-rows, end-rows on how to deal with layout, when items are of different sizes.
This would then ensure that they layout looks aesthetically pleasing for the lead into layout navigation, middle navigation and lead out of navigation section.

See article with discussion of problem here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Loirooriol]

Your title probably needs [css-flexbox] at the beginning.

when 'flex-wrap' setting is active

Does this mean single-line or multi-line?

The secondary component will control how the items will be aligned
using the remaining row-space, if the items didn't fully utilize all the space

I don't understand. How is this different than current behavior?

See article with discussion of problem here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

That's "A Complete Guide to Flexbox", not a discussion of a problem.

[fantasai]

I don't understand this issue report, either. Maybe you could draw a picture?

[wesleyolis]

Hi,

Here is an example of using google excel, their are two sheets, for obvious reasons...

You need to look at this as if you were doing geometry, the layout is per the blocks defined in the example. So just like you exploded or compress sections for demonstration, the same thing is done here. Require to interpret this as per the excel cell, which would be seen pixels but 100 times bigger.

Obviously the algorithm for placement would potentially have to compute the remaining number of items that need to populate the first or last rows, so that it would know how to correctly balance, the remaining items between the top and the bottom, accordingly and adjust their layout.

I have only covered the main direction so far and have yet to cover the cross dimension of alignment,
will look at add more examples to the document..
Example of a few different layouts

Their is one more permutation setting that is required, for controlling dividing of elements, between the top and bottom rows: This basically be a preference settings, which need to offer the following:
triangle/parallelogram shape top to bottom, or inverted versions.. If the items between the top and the bottom equal in amount.

Right now I have only worked on the number of items, which is simpler can could be used as a seed a value for the resolution of solving items of all different sizes, that take up different amounts of screen space, in which one would be doing it based on area/ width and height of an element box.