CSS3 scalable box attribute, which can be used to display child elements equally or display the size of child elements proportionally_html/css_WEB-ITnose

The usage is similar to Android's android:layout_weight attribute. It can be compared to the usage in Android. This is easier to remember. Since all browsers currently do not support most attributes, all attributes need to be added to Firefox. , Safari, Opera and Chrome support alternative -moz- and -webkit- prefixes. Now basically all CSS3 properties should do this, that is, each property needs to be set at least three, refer to the example below.

Parent container attribute:
display:box; When this attribute is defined, margin:0px auto is invalid when the child element wants to be displayed in the center, and text-align is required: center (in Android, the layout_weight of the LinearLayout sub-control can only take effect. In CSS3, the display is similar to box)
box-orient: horizontal (horizontal) | vertical (vertical) | inline-axis (horizontal) | block -axis (vertical) | inherit; (android:orientation attribute in Android)
box-direction : normal (default) | reverse (reverse) | inherit;
box-align (child container inside the parent container) Vertical alignment): start (top) | end (bottom) | center (center) | baseline | stretch (stretch); (android:gravity attribute in Android)
box-pack (child in parent container Horizontal alignment of the container): start (left) | end (right) | center (center) | justify (horizontally equally divided parent container width); (android:gravity attribute in Android)
box-lines (stipulations If the column exceeds the space in the parent box, whether to wrap the display. Currently, no browser supports the box-lines attribute): single|multiple;

Example:

display:box;
display:-moz-box;
display:-webkit-box;
box-orient:horizontal;
-moz-box-orient:horizontal;
- webkit-box-orient:horizontal;

Subcontainer properties:
box-flex (Specifies whether the child elements of the box can stretch their size.): value (the scalable row of elements. Flexibility is relative, for example, a child element with a box-flex of 2 is twice as big as a child element with a box-flex of 1.), when the elements in it are set to specific width or height and margin , other elements are allocated proportionally according to the size of the parent container minus these specific values.

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

(android:layout_weight attribute in Android)

Example:

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