Mobile Web Development Practice-CSS3 (1) box model Display:-webkit-box;

Box-flex is a newly added box model attribute of CSS3, which can solve our layout by n multi-structure, CSS implementation. A layout application for classic   is the vertical, horizontal, and proportional distribution of layouts. Currently Box-flex properties are not fully supported by Firefox, Opera, or Chrome, but they can be used to define Firefox (-moz), opera (-0), Chrome/safari (-webkit) using their private properties.   Box-flex Property Box-flex mainly let the child container for the parent container width according to certain rules  html code:<article>    <section class= " Sectionone ">01</section>    <section class=" Sectiontwo ">02</section>    <section class= "Sectionthree" &GT;03&LT;/SECTION&GT;&LT;/ARTICLE&GT;&NBSP;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;} Show effect:  Description: The parent container wrap must be defined display:box its child container before it can be divided (if display:box, the container is defined in order to inline the element   use margin:0px Auto to center is not valid, in order to center it only through its parent container's text-align:center), respectively to Sectionone, Sectiontwo, Sectionthree Box-flex set 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 namely 200px,sectionthree occupy   1/6 of the parent structure width 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 of the sub-containers or multiple sub-containers is 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 the fixed   width value, the child container directly applies the width value of the setting, the other is not set, and the width of the parent container is subtracted from the fixed width The distribution is divided according to a certain proportion on the basis of the remaining   width. Take a look at the code below  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 fixed width     background:green;} Show 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 occupy 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 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 margin property}.sectionthree{width:200px; Background:green;} Show effect

Description: The width of the parent container is 600px minus the 200px set up on the sub-container, minus 100px (2x50) remaining 300px, the 300px width value is divided by the   value set by Box-flex, Sectionone occupies 3/4 that is 225px, Sectiontwo occupies 1/4 or 75px. To be continued content two, box attributes above will box-flex how to partition the width of the parent container to explain the completion, the following is a look at the parent container inside the box property including which. The box properties are shown in the following   1 box-orient, box-direction, Box-align, Box-pack, box-lines   Two, Box properties on the previous article " CSS3 Elastic Box Model Box-flex "will box-flex how to divide the width of the parent container. The following is a look at what box properties are included in the parent container   box property, as shown in the following code: Box-orient | box-direction | Box-align | Box-pack | Box-lines 1, Box-orientbox-orient (Orient is more accurate) is used to determine how the parent container lining the container, horizontal or vertical. The optional attributes are as follows: Horizontal | Vertical | Inline-axis | Block-axis | Inherithorizontal, Inline-axis Description: Set the horizontal or Inline-axis property to the box its effect seems to be consistent, can be the sub-container horizontal arrangement, the actual difference between the two are still   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. If the parent   container defines a height value, the height value of its child container is set to an invalid state, the height of all child containers is equal to the height value 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 class= "wrap" >    <section class= "Sectionone" >01</section>    <section class= "Sectiontwo" >02</section>    <section class= "Sectionthree" &GT;03&LT;/SECTION&GT;&LT;/ARTICLE&GT;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 Note: To set the box vertical or Block-axis property (this property is the default) its effect seems to be consistent, can be the sub-container vertical arrangement, 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 class= "wrap" > <section class= "sectionone" >01</section> <section class= "section ">02</section> <section class=" Sectionthree "&GT;03&LT;/SECTION&GT;&LT;/ARTICLE&GT;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 for the child container to inherit the related properties of the parent container. 2. Box-directionbox-direction is used to determine the order of the sub-containers in the parent container, as shown in the following code: normal | Reverse | Inheritnormal is the default value that is displayed in the order of the structure in the HTML document. The following code, if Box-direction is set to normal, then the structure shows Sectionone, Sectiontwo, sectionthreehtml code: <article class= "wrap" > < Section class= "Sectionone" >01</section> <section class= "Sectiontwo" >02</section> <section C lass= "Sectionthree" &GT;03&LT;/SECTION&GT;&LT;/ARTICLE&GT;CSS code:. Wrap{width:600px;height:200px;display:-moz-box ;d isplay:-webkit-box;display:box;-moz-box-direction:normal;//Set mormal default value-webkit-box-direction:normal;// Set Mormal default value box-direction:normal;//set mormal default}.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 is reversed as shown above set nomal its structure is arranged in Sectionone, Sectiontwo, Sectionthree, and if set reverse reversed, its structure is arranged in the order of 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 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-alignbox-align represents the vertical alignment of the face container in the parent container, and 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: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 for top alignment, as shown in

End is aligned at the bottom of the box-align, as shown in

Center aligns in Box-align, as shown

Stretch in box-align for stretching, stretching to high with the parent container

3. Box-packbox-pack represents the horizontal alignment of the face container in the parent container, and 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: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 indicates that the horizontal is aligned to the left, as shown in

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

Center is aligned horizontally in Box-pack, as shown in

Justify the width of the parent container in Box-pack (only unfortunately, Firefox and Opera are temporarily unsupported, only Safari, chrome support)

Mobile Web Development Practice-CSS3 (1) box model Display:-webkit-box;