Display: Box

 

 

Box attribute

Box-Orient: used to determine whether the Sub-containers in the parent container are arranged horizontally or vertically.
Box-direction: used to determine the sub-container arrangement sequence in the parent container
Box-align: vertical alignment of the face container in the parent container
Box-Pack: horizontal alignment of the face container in the parent container
Box-Flex: mainly enables sub-containers to divide the width of the parent container according to certain rules.
Box-lines

 

 

1. Box-flex
Box-Flex mainly allows sub-containers to divide 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:

 

 

 

Sectiontwo sub-container add margin: 0px 50px so that the sub-container has a certain interval between its width

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 the margin attribute }. sectionthree {width: 200px; Background: green ;}

Display Effect:

Note:
The width of the parent container is 600px minus the 200px value of the sub-container and then the 100px (2 × 50) minus the 300px value. The 300px width value is divided by the value set by box-flex, sectionone occupies 3/4, that is, 225px, and sectiontwo occupies 1/4, that is, 75px.

 

2. Box-Orient
Box-Orient is used to determine the arrangement of sub-containers in the parent container, whether horizontal or vertical. The optional attributes are as follows:

horizontal | vertical | inline-axis | block-axis | inherit

Description of horizontal and inline-axis:
Setting the horizontal or inline-axis attribute for box seems to have the same effect. Sub-containers can be arranged horizontally. The actual difference between the two is not clear yet. If the parent container chooses the horizontal or inline-axis attribute to horizontally arrange the sub-container, the width of the parent container is allocated and divided.If the parent container defines the height value, the height setting of its sub-container is invalid. The height of all sub-containers is equal to the height of the parent container. If the parent container does not set the height value, the height of the sub-container whose sub-container is valid and takes the maximum height value.
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; // 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:
Setting the vertical or block-axis attribute for Box (this attribute is the default value) seems to have the same effect. Sub-containers can be vertically arranged. The actual difference between the two is not clear yet. If the parent container chooses the vertical or block-axis attribute to vertically arrange the sub-container, the height of the parent container is allocated and divided.If the parent container defines the width value, the width value of its sub-container is invalid. If the parent container does not set the width value, the width of the sub-container that is valid and obtains the maximum width.
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; // vertically arranged }. 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 attribute allows the sub-container to inherit the relevant attributes of the parent container.

 

3. Box-direction
Box-direction is used to determine the sub-container arrangement order in the parent container. The specific attributes are as follows:

normal | reverse | inherit

Normal is the default value.
The structure is displayed in sequence in the HTML document. The following code: If box-direction is set to normal, the structure displays sectionone, sectiontwo, and sectionthree in sequence.
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 the default mormal value-WebKit-box-direction: normal; // set the default mormal Value box-direction: normal; // set the default mormal 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 reverse:
As shown in the preceding figure, set nomal to sectionone, sectiontwo, and sectionthree. If reverse is set to reverse, the order of the structure is sectionthree, sectiontwo, and 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 reverse-WebKit-box-direction: reverse; // set to reverse }. 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:

 

4. Box-align
Box-align indicates the vertical alignment of the face container in the parent container. 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
In Box-align, it indicates the top-right alignment, as shown in

End
Align bottom in box-align, as shown in

Center
Align in box-align, as shown in

Stretch
In Box-align, it indicates stretching, stretching to a height equal to the parent container

 

5. Box-pack
Box-pack indicates the horizontal alignment of the face container in the parent container. 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
In Box-pack, the horizontal center is left aligned, as shown in

End
In Box-pack, the horizontal center is right aligned, as shown in

Center
In Box-pack, align horizontally, as shown in

Justify
In Box-pack, the width of the Horizontal sub-parent container is expressed. (unfortunately, Firefox and opera are not supported currently, and only safari and chrome are supported)

Display: Box