CSS3 Box Model Display:box detailed

Display:box; Box-flex is a newly added box model attribute of CSS3, which can solve our layout by n multi-structure,CSS implementation. One of the classic layout applications is the vertical, horizontal, and proportional distribution of the layout.

Currently Box-flex properties are not fully supported by Firefox, Opera, or Chrome, but can be defined using their private properties for Firefox (-moz-), opera (-o-), chrome/ Safari (-webkit-).
First,Box-flex properties
Box-flex mainly allows sub-containers to be divided for the width of the parent container according to certain rules
HTML code:

<article>    <section>01</section>    <section>02</section>    <section >03</section></article>

CSS code:

. wrap{    width:600px;    height:200px;    Display:-moz-box;    Display:-webkit-box;    Display:box;}. sectionone{    Background:orange;    -moz-box-flex:3;    -webkit-box-flex:3;    Box-flex:3;}. sectiontwo{    background:purple;    -moz-box-flex:2;    -webkit-box-flex:2;    Box-flex:2;}. sectionthree{    -moz-box-flex:1;    -webkit-box-flex:1;    box-flex:1;    Background:green;}

Display effect:

Description
The parent container wrap must be defined with a CSS property display:box its child containers can be divided (if Display:box is defined for inline elements , it is invalid to use margin:0px Auto to center it. To center it only through the text-align:center of its parent container, set the Box-flex for Sectionone, Sectiontwo, Sectionthree, respectively, 3, 2, 1, that is to say, these three sub-containers will be the parent container wrap width 600px divided into 6 parts, Sectionone occupy the parent structure width of 3/6 namely 300px,sectionone occupy the parent structure width 2/6 that is 200px,sectionthree the parent structure width 1 /6 is 100px.
The above is divided by the proportion of the allocation, if one of the sub-containers or multiple sub-containers set fixed width and how to divide that?
If one or more of the sub-containers are set to a fixed width, the other sub-containers are not set, and are computed in such a way that the child container is set to a fixed width value, the child container directly applies the width value of the setting, and the other is not set to the width of the parent container minus the fixed width of the child container setting. Divide and distribute according to a certain proportion on the basis of the remaining width. Take a look at the following code:
HTML code:

<article>    <section>01</section>    <section>02</section>    <section >03</section></article>

CSS code:

. wrap{    width:600px;    height:200px;    Display:-moz-box;    Display:-webkit-box;    Display:box;}. sectionone{    Background:orange;    -moz-box-flex:3;    -webkit-box-flex:3;    Box-flex:3;}. sectiontwo{    background:purple;    -moz-box-flex:1;    -webkit-box-flex:1;    Box-flex:1;}. sectionthree{    width:200px;//Set fixed width    background:green;}

Display effect:

Description
Sectionthree set a fixed width of 200px, the parent container's width 600px minus the modified sub-container 200px also left 400px, this 400px width value is divided according to Box-flex set value, Sectionone occupies 3/4 namely 300px, Sectiontwo occupies 1/4 or 100px.
On the basis of the above code to the Sectiontwo sub-container to add margin:0px 50px so that the sub-containers to create a certain interval between its width and how to divide the allocation of that? Then look
CSS code:

. wrap{    width:600px;    height:200px;    Display:-moz-box;    Display:-webkit-box;    Display:box;}. sectionone{    Background:orange;    -moz-box-flex:3;    -webkit-box-flex:3;    Box-flex:3;}. sectiontwo{    background:purple;    -moz-box-flex:1;    -webkit-box-flex:1;    box-flex:1;        margin:0px 50px;//Add margin property}.sectionthree{    width:200px;    Background:green;}

Display effect:

Description
The width of the parent container is 600px minus the 200px set on the sub-container, minus 100px (2x50) remaining 300px, the 300px width value is divided by the value set by Box-flex, Sectionone occupy 3/4 is 225px, Sectiontwo occupies 1/4 or 75px.
Second, Box properties
The above "CSS3 elastic box model of Box-flex" will box-flex how to divide the width of the parent container is explained, the following is a look at the box property inside the parent container including which box properties, the following code is shown below:

box-orient | box-direction | Box-align | Box-pack | Box-lines

1, Box-orient
Box-orient (Orient) is used to determine the arrangement of the parent container lining container, horizontal or vertical. The optional attributes are as follows:

Horizontal | Vertical | Inline-axis | Block-axis | Inherit

Horizontal, Inline-axis Description:
Set the horizontal or Inline-axis property for box The effect seems to be consistent, can be the sub-container horizontal arrangement, the actual difference between the two is not clear. If the parent container chooses the horizontal or Inline-axis property, the child container is arranged horizontally, which divides the width of the parent container. at this point, if the parent container defines a height value, its child container's height value is set to an invalid state, the height of all child containers equals the height of the parent container, and if the parent container does not set the height value, the height value of its child container is valid and the height of the child container of the maximum height value is taken.
HTML code:

<article>    <section>01</section>    <section>02</section>    <section >03</section></article>

CSS code:

. wrap{width:600px;height:200px;display:-moz-box;display:-webkit-box;display:box;-moz-box-orient:horizontal;- webkit-box-orient:horizontal;box-orient:horizontal;//Horizontal Arrangement}.sectionone{background:orange;-moz-box-flex:1;- Webkit-box-flex:1;box-flex:1;}. Sectiontwo{background:purple;-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;}. Sectionthree{width:100px;background:green;}

Display effect:

Vertical, Block-axis Description:
Set the vertical or Block-axis property for box (this property is the default) and its effect seems to be consistent, you can arrange the sub-containers vertically, the actual difference between the two is not yet clear. If the parent container chooses the vertical or Block-axis property, the child container is arranged vertically, dividing the height of the parent container. If the parent container defines a width value, its child container's width value is set to an invalid state, and if the parent container does not set the width value, the width value of its child container is valid and the width of the child container of the maximum width value is taken.
HTML code:

<article>    <section>01</section>    <section>02</section>    <section >03</section></article>

CSS code:

. wrap{width:600px;height:200px;display:-moz-box;display:-webkit-box;display:box;-moz-box-orient:vertical;- webkit-box-orient:vertical;box-orient:vertical;//Vertical Arrangement}.sectionone{background:orange;-moz-box-flex:1;- Webkit-box-flex:1;box-flex:1;}. Sectiontwo{background:purple;-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;}. Sectionthree{height:100px;background:green;}

Display effect:

Inherit Description:
The Inherit property is to have the child container inherit the related property of the parent container.
2, Box-direction
The box-direction is used to determine the order of the child containers in the parent container, as shown in the following code:

normal | Reverse | Inherit

Normal is the default value
Display the structure in the HTML document in order of precedence. The following code, if Box-direction is set to normal, the structure shows Sectionone, Sectiontwo, sectionthree in turn.
HTML code:

<article>    <section>01</section>    <section>02</section>    <section >03</section></article>

CSS code:

. wrap{width:600px;height:200px;display:-moz-box;display:-webkit-box;display:box;-moz-box-direction:normal;// Set Mormal default value-webkit-box-direction:normal;//set mormal default box-direction:normal;//set mormal default value}.sectionone{background : Orange;-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}. Sectiontwo{background:purple;-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;}. Sectionthree{width:100px;background:green;}

Display effect:

Reverse indicates inversion:
As shown above, the structure of the nomal is arranged in the order of Sectionone, Sectiontwo, Sectionthree, and if the set reverse is reversed, its structure is arranged in the order of Sectionthree, Sectiontwo, Sectionone.
HTML code:

<article>    <section>01</section>    <section>02</section>    <section >03</section></article>

CSS code:

. wrap{width:600px;height:200px;display:-moz-box;display:-webkit-box;display:box;-moz-box-direction:reverse;// Set to invert-webkit-box-direction:reverse;//set to invert box-direction:reverse;//set to invert}.sectionone{background:orange;- Moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}. Sectiontwo{background:purple;-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;}. Sectionthree{width:100px;background:green;}

Display effect:

3, Box-align
The box-align represents the vertical alignment of the face container in the parent container, and the optional parameters are as follows:

Start | End | Center | Baseline | Stretch

HTML code:

<article><section>01</section>    <section>02</section>    <section>03 </section></article>

CSS code:

. wrap{width:600px;height:108px;display:-moz-box;display:-webkit-box;display:box;-moz-box-align:stretch;- Webkit-box-align:stretch;-o-box-align:stretch;box-align:stretch;}. Wrap section{height:80px;}. Wrap. Sectionone{background:orange;-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}. Wrap. sectiontwo{background:purple;-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;height:108px;}. Wrap. Sectionthree{width:100px;background:green;}

Start
The box-align represents the top-aligned, as shown in

End
The box-align represents the bottom alignment, as shown in

Center
The box-align represents the center alignment, as shown in

Stretch
Box-align for stretching, stretching to the parent container, etc.

3, Box-pack
The box-pack represents the horizontal alignment of the face container in the parent container, and the optional parameters are as follows:

Start | End | Center | Justify

HTML code:

<article>    <section>01</section>    <section>02</section>    <section >03</section></article>

CSS code:

. wrap{width:600px;height:108px;border:1px Solid red;display:-moz-box;display:-webkit-box;display:box;- Moz-box-pack:end;-webkit-box-pack:end;-o-box-pack:end;box-pack:end;}. Wrap section{width:100px;}. Wrap. Sectionone{background:orange;}. Wrap. Sectiontwo{background:purple;}. Wrap. Sectionthree{background:green;}

Start
The box-pack indicates that the horizontal is aligned to the left, as shown in

End
The box-pack indicates that the horizontal is aligned to the right, as shown in

Center
The box-pack represents the horizontal center alignment, as shown in

Justify
The box-pack represents the horizontal equal to the parent container width (only unfortunately, Firefox and Opera are temporarily unsupported, only Safari, chrome support)