CSS3.0 box model display: box; details

Box-flex is the new box model attribute added by css3. Its appearance can solve the layout through N multi-structure and css. A typical layout application is vertical height, average water distribution, and proportional layout. Currently, the box-flex attributes are not fully supported by firefox, Opera, and chrome browsers, but their private attributes can be used to define firefox (-moz) and opera (-0), chrome/safari (-webkit ). I. The box-flex attribute box-flex mainly allows the sub-container to divide the width of the parent container according to certain rules. HTML code: <article> <section class = "sectionOne"> 01 </section> <section class = "sectionTwo"> 02 </section> <section class = "sectionThree"> 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;}: effect description: you must define the css attribute "display: box" for the parent container wrap to divide its sub-containers. (If "display: box" is set, the container is defined as an inline element and margin is used: 0px auto does not make it centered. To center it, you can only use text-align: center of its parent container ); set 3, 2, and 1 for box-flex of sectionOne, sectionTwo, and sectionThree respectively. That is to say, the three sub-containers divide the width of the parent container wrap into 6 parts, sectionOne occupies 3/6 of the parent structure width, that is, PX, and sectionOne occupies the parent node 2/6 of the Construction width is 200px, and sectionThree occupies 1/6 of the parent structure width, that is, 100px. The above is divided and allocated according to the proportion. If one or more sub-containers have a fixed width, how can they be divided? If a sub-container or multiple sub-containers have a fixed width and other sub-containers are not set, the calculation method is as follows: if a sub-container has a fixed width value, the sub-container directly applies the configured width value. Otherwise, the fixed width set by the sub-container is subtracted from the width of the parent container, based on the remaining width, it is allocated according to a certain proportion. See the following HTML code <article class = "wrap"> <section class = "sectionOne"> 01 </section> <section class = "sectionTwo"> 02 </section>. <section class = "sectionThree"> 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 the fixed width background: green;} to display the effect.

 

Note: sectionThree sets a fixed width of PX, and the width of the parent container is PX minus PX of the sub-container. The PX width value is divided by the value set by box-flex, sectionOne occupies 3/4, that is, 1/4 PX, and sectionTwo occupies, that is, PX. Based on the above Code, add margin: 0px 50px to the sectionTwo sub-container so that there is a certain interval between sub-containers. How can we divide the distribution? Next, let's look at the 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, and then 100px (2 × 50) is subtracted from the 200px value of the sub-container, the 3/4 PX width value is divided by the value set by box-flex. sectionOne occupies 1/4, that is, 225px, and sectionTwo occupies, that is, 75px. 2. The box attribute explains how to divide and allocate the width of the parent container in box-flex. The following describes the box attributes in the parent container. The box attributes are as follows: box-orient, box-direction, box-align, box-pack, box-lines 1, box-orientbox-orient (more accurate arrangement of orient translations) 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 | inherithorizontal and inline-axis. Note: Setting the horizontal or inline-axis attribute for box appears to have the same effect, sub-containers can be horizontally arranged. 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 class = "wrap"> <section class = "sectionOne"> 01 </section> <section class = "sectionTwo"> 02 </section> <section class = "sectionThree "> 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:

 

Vertical, block-axis Description: Set the vertical or block-axis attribute for the box (this attribute is the default value). The effect seems to be consistent and sub-containers can be vertically arranged, what are the differences between the two. 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 class = "wrap"> <section class = "sectionOne"> 01 </section> <section class = "sectionTwo"> 02 </section> <section class = "sectionThree "> 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:

 

Inherit Description: The inherit attribute allows the sub-container to inherit the relevant attributes of the parent container. 2. box-directionbox-direction is used to determine the sub-container arrangement order in the parent container. The specific attributes are shown in the code below: normal | reverse | inheritnormal is the default value, which is displayed in sequence according to the structure in the HTML document. The following code shows the sectionOne, sectionTwo, and sectionThreeHTML codes in sequence if box-direction is set to normal: <article class = "wrap"> <section class = "sectionOne"> 01 </section> <section class = "sectionTwo"> 02 </section> <section class = "sectionThree "> 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:

 

Reverse indicates that the order of nomal's structure is sectionOne, sectionTwo, and sectionThree. If reverse is set to reverse, the order of the structure is sectionThree, sectionTwo, sectionOneHTML code: <article class = "wrap"> <section class = "sectionOne"> 01 </section> <section class = "sectionTwo"> 02 </section> <section class = "sectionThree "> 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:

 

3. box-alignbox-align indicates the vertical alignment of the face container in the parent container. The optional parameters are as follows: start | end | center | baseline | stretchHTML code: <article class = "wrap"> <section class = "sectionOne"> 01 </section> <section class = "sectionTwo"> 02 </section> <section class = "sectionThree "> 03 </section> </article> CSS code :. wrap {width: 600px; height: pixel PX; display:-moz-box; display:-webkit-box; display: box;-moz-box-align: stretch; -webkit-box-align: stretch;-o-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: pixel PX ;}. wrap. sectionThree {width: 100px; background: green;} start in box-align indicates top-level alignment, as shown in

 

The end value in box-align indicates the bottom alignment, as shown in

 

Center align in box-align, as shown in

 

Stretch in box-align indicates stretching, stretching to a height equal to the parent container

 

3. box-packbox-pack indicates the horizontal alignment of the face container in the parent container. The optional parameters are as follows: start | end | center | justifyHTML code: <article class = "wrap"> <section class = "sectionOne"> 01 </section> <section class = "sectionTwo"> 02 </section> <section class = "sectionThree "> 03 </section> </article> CSS code :. wrap {width: 600px; height: pixel PX; border: 1px solid red; display:-moz-box; display:-webkit-box; display: box; -moz-box-pack: end;-webkit-box-pack: end;-o-box-pack: end ;}. wrap section {width: 100px ;}. wrap. sectionOne {background: orange ;}. wrap. sectionTwo {background: purple ;}. wrap. sectionThree {background: green;} start in box-pack indicates horizontal center-left alignment, as shown in

 

In box-pack, end indicates the right alignment of the horizontal center, as shown in

 

Center in box-pack indicates horizontal center alignment, as shown in

 

Justify indicates horizontal separation of parent container width in box-pack (the only pity is that firefox and opera are not supported currently, only safari and chrome are supported)