Detailed explanation of the new CSS display:box property

1. display:box;

Setting this property on an element will cause its children to be arranged on the same level, similar to display:inline-block;.

2. The following properties can be set in its children

Prerequisite: To use the following properties, you must set display:box in the parent;

1.box-flex:number;

1) Number of parent element widths

2) If a child element is set with a fixed width, the child element will use the fixed width, and other child elements that are not set with a fixed width will use the remaining parent width (parent - total width of child elements with fixed widths in number).

3) If the child element has a margin value, the remaining width (parent width - child fixed total width - total margin value) is number parts

2.box-orient:horizontal/vertical

Setting this property on the parent will cause the children to be arranged horizontally or vertically.

Note: All major browsers do not support this property and a prefix must be added.

1) horizontal arrangement, the total width of the children = the width of the parent. If the parent has a fixed width, the width set for the child will be invalid, and the child will fill the parent's width.

2) vertical arrangement, the total height of the children = the height of the parent. If the parent has a fixed height, the height set for the child will be invalid, and the child will fill the parent's height.

3.box-direction:normal/reverse

Set this property on the parent to determine the order in which the children are sorted.

1) normal default value, children are arranged in HTML order

2) reverse

4.box-align:start/end/center/stretch

Sets the vertical alignment of the child at the parent level.

1) Start vertical top alignment

2) end vertical bottom alignment

3) center vertical alignment

4) stretch stretches the height of the child to match the height set by the parent. The child height is invalid.

5.box-pack:start/end/center

Sets the horizontal alignment of the child at the parent level.

1) Start horizontal left alignment

2) end horizontal right alignment

3) Center horizontal alignment

Summarize

The above is the new CSS display:box attribute that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!