[Reprint] Box model Display:-webkit-box;

Http://blog.sina.com.cn/s/blog_62161a4d01019b7g.html

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 they can be used to define Firefox (-moz), opera (-0), Chrome/safari (-webkit) using their private properties. First, Box-flex propertiesBox-flex mainly let the child container for the width of the parent container according to certain rules to divide  html code: 010203 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: NOTE: 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 the inline element   using margin:0px Auto to center It is not valid, 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 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 following code  html code 010203 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: 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 the Box- flex set value, Sectionone occupies 3/4 namely 300px,sectiontwo occupies 1/4 namely 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 allocate division   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 parent container width 600px minus set the sub-container 200px base and subtract 100px (2x50) remaining 300px, this 300px width value is divided by the   value set by Box-flex, Sectionone occupy 3/ 4 namely 225px,sectiontwo occupies 1/4 namely 75px. two, Box Properties The specific properties are 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: 010203CSS 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:o Range;-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;} Show effect: Vertical, Block-axis Description: Set the vertical or Block-axis property to box (this property is the default) its effect seems to be consistent, can be the sub-container vertical arrangement, what is the difference between the   material is not yet clear. If the parent container chooses the vertical or Block-axis property to arrange the child container vertically, it isAssigns the height of the parent container to partition. At this point, if the parent container   defines a width value, its child container's width value setting is invalid, 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: 010203CSS 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;} Show Effect: Inherit Description: The Inherit property is to have the child container inherit the related property 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: 010203CSS 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;} Show effect: Reverse is inverted as shown above set nomal the order of its structure is Sectionone, sectiontwo, sectionthree; If set reverse reverse, the structure of the row   The column order is Sectionthree, Sectiontwo, sectiononehtml code: 010203CSS 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;} Show effect: 3, box-alignbox-align represents the vertical alignment of the face container in the parent container, the optional parameters are as follows: Start | End | Center | Baseline | Stretchhtml Code: 010203CSS 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 the box-align represents the top alignment, as shown in the end in box-align for the bottom alignment, as shown in the center in the box-align represents the center alignment, as shown in the stretch in box-align for stretching, stretching to the parent container and so on 3, The 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: 010203CSS 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 the end at Box-pack for horizontal right alignment, as shown in the center at Box-pack for horizontal center alignment, As shown in justify in Box-pack, the width of the parent container is equal (only unfortunately, Firefox and Opera are temporarily unsupported, only Safari, chrome support)

[Reprint] box model Display:-webkit-box; use