Small program UI Design (8)-align-content application of layout decomposition-flexbox

Flexbox Align-content What the hell is the devil, I also did long time developed, the current tool Wviewrow component uses this property, Wviewcolumn This property does not work.
are two examples of justify-content,align-items, and align-content attribute combinations, please take a closer look.

Do you see the difference, the first overall right-hand arrangement (Justify-content=flex-end), the first row and the second line of short yellow and short red on the line alignment (Align-items=flex-start). The second whole is left-aligned, and the first and second lines of short yellow and short red are bottom-aligned (align-items=flex-end). The first line aligns to the top, the second line aligns to the bottom (Align-content=space-between). The second one has an interval (align-content=space-around) between the top and bottom.
The first attribute is as follows:

The second attribute is as follows:

The combination of the above attributes determines the inner component wrapping display, the internal arrangement of each line, and the arrangement of rows. You can simply interpret the Align-content attribute as a block attribute, which affects each row and the layout of each block in view when there are multiple rows.
This paste content because it is three attribute combinations, after reading the explanation, please actually do it.

Small program UI Design (8)-align-content application of layout decomposition-flexbox