Applet UI Design (7)-layout decomposition-left-upper and lower structure

Flexbox layout in a lot of ways, we continue to understand a left-down structure of the layout decomposition


In the left tree Wviewrow there are two wviewcolumn below. The wviewrow are arranged horizontally, and the wviewcolumn are arranged vertically. Put a picture in the first wviewcolumn and two pictures in the second one. such as the expanded structure tree.

The following is a breakdown of the flexbox of two images in the second wviewcolumn.

Flex-direction=column indicates that the internal component spindle x is from top to bottom.
Flex-wrap does not work with column types in this tool. Note here that the actual design is easy to confuse because the coordinate system is rotated in this way. We recommend that you avoid using column as much as possible.
The Justify-content=space-between determines the two picture intervals and the position in the Wviewcolumn. This property determines the first element aligns to the top, the last element aligns to the bottom, and the middle has an interval. If there are 5 pictures, the first and fifth will be close to each other. The interval of each picture is the height of the view minus 5 picture height and then divided by 4. Math bad students can actually operate, in a wviewcolumn drag multiple pictures, and then change the justify-content properties to see the effect.
The Align-items=flex-start determines the alignment of the secondary axis y from the origin point. Since this view is column rotated the coordinate system, it may be a little confusing here, I am not very good at describing the language here. You can actually drag into the component, changing the properties to see the actual effect.
The Align-content attribute is not explained in more detail in the next post. This example does not affect the layout.

Applet UI Design (7)-layout decomposition-left-upper and lower structure