How do I set the alignment of individual elements of the spindle in Flex layout? Illustration-self does not work in Flexbox.

Today I had a style layout problem while writing a Vue project, as follows I want to use flex layout, and the “to calculate” element can be right aligned (as shown below).

I don’t want to wrap another div around the left two boxes. Then I thought, since the side axis can align individual elements with align-self, can I use the property-context-self attribute in the grid layout to align individual elements of the main axis?

I tried it and it didn’t work. Then I looked up MDN and found that precision-self was invalid in Flexbox. Here are some of my insights into MDN:

Why does justify self fail in Flexbox layout?

MDN quote: On the spindle, Flexbox processes our content as a group. Calculate the amount of space needed to lay out the child elements, and then the remaining space is available for allocation. The context-content property controls how the remaining space is used. Set context-content: flex-end, extra space before all child elements, context-content: space-around, which is placed on either side of the child elements of that dimension, and so on.

It means that the elastic elements on the principal axis are treated as a group and then passed throughjustify-contentAllocate the remaining space to this group of elements. whilejustify-selfIs to set the alignment of individual elements, which means that in Flexbox,justify-selfAttributes don’t make sense because we’re always dealing with moving entire groups of elements.

Auto Margins for single elastic elements:

So while in the Flexbox layout the spindle element can only be treated as a group, we can increase the size of individual boxes through margins, and achieve center or left-right alignment by making them larger to take up the remaining space.

The margin set to auto absorbs all of the available space within it. This is how automatic margin centered blocks work. By setting the left and right margins to Auto, both sides of our block try to take up all available space, thus pushing the box into the center.

In my project I set the “to calculate” element margin-left to complete. So why don’t you set display: block; And width. I think it is possible that after setting the elastic box, the elastic elements are converted to block elements and the width is calculated automatically. The results show that I was right.