Shulou(Shulou.com)05/31 Report--

This article mainly introduces how to use the display:box attribute in css related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have a harvest after reading this article on how to use the display:box attribute in css, let's take a look at it.

1. Display:box

Setting this attribute on an element causes its children to be arranged at the same level, similar to display:inline-block;.

Second, you can set the following properties in its offspring

Premise: display:box must be set on the parent using the following attributes

1.box-flex:number

1) number share of the width of the parent element

2) if the child element sets a fixed width, the child element applies a fixed width, and other word elements that do not set a fixed width will have the remaining parent width (parent-the total width of the child element with a fixed width set according to the number of shares of number

3) if the child element has margin value, the remaining width (parent width-child fixed total width-total margin value) accounts for the share of number.

2.box-orient:horizontal/vertical

If this property is set on the parent, the children are arranged horizontally or vertically.

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

1) the horizontal is arranged horizontally, and the total width= of the offspring is the parent width. If the parent has a fixed width, the width set by the child is invalid and the child will fill the width of the parent.

2) the vertical is arranged vertically, and the total height= of the offspring is the parent height. 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) the default value of normal, and the offspring are arranged in html order

2) reverse order of reverse

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

At the parent setting, the vertical alignment of the offspring.

1) start vertical top alignment

2) end vertical bottom alignment

3) center vertical center alignment

4) stretch stretches the height of the offspring, which is consistent with the height set by the parent. The descendant height is invalid.

5.box-pack:start/end/center

At the parent setting, the horizontal alignment of the children.

1) start horizontal left alignment

2) end horizontal right alignment

3) horizontal alignment of center

This is the end of the article on "how to use display:box attributes in css". Thank you for reading! I believe you all have a certain understanding of "how to use display:box attributes in css". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.