CSS3 Scalable Box properties that can be used to display sub-elements evenly or proportionally to display the size of child elements

Usage is similar to Android's Android:layout_weight property, which can be compared with the use of Android, so it is very easy to remember, because all browsers do not support most of the properties, so all the attributes need to add Firefox, Safari, Opera, and Chrome support alternative -moz-and -webkit-prefixes, and now basically all of the CSS3 properties should do this, i.e. each attribute needs to be set at least three, as shown in the example below.

Parent Container Properties:
Display:box When this attribute is defined, margin:0px Auto is not valid when the child element wants to be centered, using Text-align:center ( The layout in Android is layout_weight to LinearLayout child controls, CSS3 display is similar to box)
Box-orient:horizontal (horizontal) | Vertical (vertical) | Inline-axis (horizontal) | Block-axis (vertical) | Inherit (Android:orientation property in Android)
Box-direction:normal (default) | Reverse (reverse) | Inherit
Box-align (vertical alignment of the face container in the parent container): Start (top) | End (Habitat) | Center (center) | Baseline | Stretch (stretching); (Android:gravity property in Android)
Box-pack (horizontal alignment of the face container in the parent container): Start (left) | End (right) | Center (center) | Justify (horizontal equal to the parent container width); (Android:gravity property in Android)
Box-lines (Specifies if the column exceeds the space in the parent box, whether you want to wrap the line display.) There is currently no browser support for the Box-lines property. ): Single|multiple;

Cases:

Display:box;
Display:-moz-box;
Display:-webkit-box;
Box-orient:horizontal;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;

Child Container Properties:
Box-flex (Specifies whether the child elements of the box can scale their dimensions.) ): Value (the scalable line of the element. Flexibility is relative, for example, a child element with a box-flex of 2 is twice as much as a box-flex of 1. ), when the element is set to a specific width or height and margin, the other elements are subtracted by the parent container's size and then prorated.

If the parent container is set to a width of 1200px,box-orient defined as a horizontal division, that is, horizontal or inline-axis, the child element defines Box-flex, respectively, the width of the first child element will be 200px and the second 400px , and the third one is 600px. If the second child element defines a width of 300px, the first and third Box-flex definitions are 1 and 2 respectively, then the first width will be (1200-300) * 1/(1+2) = 300px, the third is 600px, and the second is 300px. If the margin is set, the same will be subtracted and then divided.

(Android:layout_weight property in Android)

Cases:

Box-flex:3;
-moz-box-flex:3;
-webkit-box-flex:3;