CSS3 display: box usage

CSS3 display: box usage
CSS3 display: box usage

Css3 brings the box value to the display attribute. This new value brings great convenience to development.

One of the scenarios is as follows:

If we want to make the internal 123 Element Level separate the space occupied by outer in different proportions, we may make 123 elements floating or set the display attribute to inline-block in the past, set the width percentage for the width attribute to split the outer.

After using display: box, you can achieve this:

#outer{    width:600px;    height:100px;    display:-moz-box;    display:-webkit-box;    display:box;}#a1{    background:blue;    -moz-box-flex:1;    -webkit-box-flex:1;    box-flex:1;}#a2{    background:green;    -moz-box-flex:2;    -webkit-box-flex:2;    box-flex:2;}#a3{    background:yellow;    -moz-box-flex:3;    -webkit-box-flex:3;    box-flex:3;}

The effect is as follows:

The box-flex attribute in the sub-element is the proportion of the element. To make this attribute take effect, the parent element must be set to display: box. For example, if box-flex is set to 3 in a3, the width occupied by a3 is600*(3/(1 + 2 + 3 ))Is 300px.

If one of the Child elements is set to a fixed width of PX, the remaining PX will be involved in the proportional division rule.

In addition, there are several attributes related to display: box.

1. box-Z environment? Http://www.bkjia.com/kf/ware/vc/ "target =" _ blank "class =" keylink "> vcmllbnQ8YnIgLz4KaG9yaXpvbnRhbCA =" vertical | inline-axis | block-axis | inherit
Used to determine the sub-container arrangement (horizontal or vertical or ...)

2. box-direction
Normal | reverse | inherit
Used to determine the direction of the sub-container. If it is set to reverse, the display effect of the Code is a3-> a2-> a1.

3. box-align
Start | end | center | baseline | stretch
Box-align indicates the vertical alignment of the face container in the parent container (top or bottom alignment or midline alignment ...)

3. box-pack
Start | end | center | justify
Box-pack indicates the horizontal alignment of the face container in the parent container
Representatives respectively
Align left, align right, align center, and average water score.