How to use the new css attribute display:box

This time I will bring you how to use the new css attribute display:box, and what are the precautions for using the new css attribute display:box. The following is a practical case, let's take a look.

1. display:box;

Set this attribute on an element to arrange its children on the same level, similar to display :inline-block;.

2. You can set the following attributes on its children

Prerequisite: To use the following attributes, display:box;# must be set on the parent.

##　1.box-flex:number;

　　1) Account for number shares of the width of the parent element

　　2) If the child element is set to have a fixed width, the fixed width will be applied to the child element , other word elements that do not have a fixed width set will use the remaining parent width (parent - the total width of the child elements that have set a fixed width is divided by number

　　3) If the child element has a margin value, then According to the remaining (parent width-child fixed total width-total margin value) width accounts for number shares

　2.box-orient:horizontal/vertical

　 Set this attribute on the parent, The children are arranged horizontally or vertically.

Note: All major browsers do not support this attribute and must be prefixed.

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

　　2) Vertical Arrange vertically, the total height of the children = the height of the parent. If the parent has a fixed height, the height set by the child is invalid, and the child will fill the height of the parent.

　3.box-direction:normal/reverse

　 Set this property on the parent to confirm the order of the children.

1) normal Default value, children are arranged in html order

2) reverse reverse order

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

Setting in the parent, the vertical alignment of the children.

1) start vertical top alignment

2) end vertical bottom alignment

3) center vertical center alignment

4) stretch stretches the child Height, consistent with the height set by the parent. Child height is invalid.

5.box-pack:start/end/center

Set in the parent, the horizontal alignment of the children.

1) start horizontal left alignment

2) end horizontal right alignment

3) center horizontal center alignment

I believe I have read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to add a Banner button in DW

##Basic performance optimization of front-end web pages

The above is the detailed content of How to use the new css attribute display:box. For more information, please follow other related articles on the PHP Chinese website!