Fineui vertical layout and horizontal layout of the 14th day---layout

layout values horizontal layout and vertical layout

The vertical box layout and the horizontal box layout are very flexible and easy to use, which can largely replace the anchor layout, row layout, and column layout.

1. Vertical Box layout:

boxconfigalign : Controls the size of the sub-container

• Center:
• stretch: Was stretched to the size of the parent container;
• stretchmax: All child controls are stretched to the maximum size of child controls.

 boxconfigposition: used to control the location of the child container

• start: Child controls start position Arrange (default);
• arranged by parent container;
• center: The child control is arranged by the parent container's middle position ;

  boxconfigchildmargin: margins for each child container

• If it is a string of four digits, the top margin, the right margin, the bottom margin, and the left margin are respectively represented;
• If it is a string of three digits, indicating the top margin, the right margin, the bottom margin, the left margin and the right margin;
• If it is a string of two digits, indicating the top margin, the right margin, the left margin with the right margin, and the bottom margin with the top margin;
• If the string consists of a number, the margins of the four facets are all of this value. As with CSS usage.

boxconfigpadding:the inner margin of the parent container

• This property has the same effect as bodypadding, except that bodypadding fails at this point, and you need to set the padding with this property.

Boxflex: Relative value. . Remove one outside. The first child container boxflex=1, and the third child container boxflex=2. So the first child container occupies a height of 1/3 (minus the second fixed height sub-container) and the corresponding third sub-container occupies 2/3 of the height. And the height of the first and third child containers varies with the height of the parent container.

Tips:

the parent container sets theboxconfigchildmargin=0 0 5 0,This means that the bottom margin of each sub-container is 5px, but the last child container overrides this property by boxmargin=0, thus guaranteeing that the last child container is 5px from the bottom boundary of the parent container.

Interface effect:

2. Horizontal box:

Similar to the vertical layout, there is an absolute layout, table layout. All the same, there is not much to say! Use the time to check the API

Fineui vertical layout and horizontal layout of the 14th day---layout