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 to the parent container's width according to certain rules to divide the 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: Description:You must define a CSS property for the parent container wrap display:box Its child containers to be partitioned (if Display:box is set, the container is defined for inline elements , it is invalid to use margin:0px Auto to center it, so that it can be centered only through the text-align:center of its parent container);The Box-flex of Sectionone, Sectiontwo, Sectionthree, respectively, are set to 3, 2, 1, which means that three sub-containers will be the width of the parent container wrap 600px is 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's 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 calculated as follows: If the child container is set to a fixedwidth 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, in the remainingdivided by a certain proportion of the width. Take a look at the following codeHTML 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;} Display Effect Description:Sectionthree Set the fixed width to 200px, the parent container's width 600px minus the modified sub-container 200px also left 400px, this 400px width value presses box-Flex Sets the value to divide, Sectionone occupy 3/4 namely 300px,sectiontwo occupy 1/4 namely 100px. On the basis of the above code, add margin:0px 50px to the Sectiontwo sub-container to create a certain interval between the sub-containers and how to divide the width of the allocationof that? Then lookCSS 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 child container, minus 100px (2x50) remaining 300px, and this 300px width value is set by Box-flexThe value is divided, Sectionone occupies 3/4 namely 225px,sectiontwo occupies 1/4 namely 75px.
Second, Box PropertiesThe specific properties are shown in the following code: Box-orient | box-direction | Box-align | Box-pack | Box-lines
1, Box-orientBox-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 | Inherithorizontal, Inline-axis Note: To set the box horizontal or Inline-axis properties its 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: 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;} 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, what are the two The real difference 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. At this point, if the parent containerdefines a width value whose child container's width value is set to an invalid state, and if the parent container does not set a width value, its child container's width value is valid and the maximum width is takenThe width of the child container for the value. 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-directionThe box-direction is used to determine the order of the child containers in the parent container, as shown in the following code:Normal | reverse | inheritNormal is the default valuedisplay the structure in the HTML document in order of precedence. 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 value 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 reversalas shown above, the structure of the nomal is arranged in the order of Sectionone, Sectiontwo, Sectionthree, and if the set reverse is reversed, the structure of the HTML 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 box-align represents the top alignment, as shown in the end in Box-align, which represents the bottom alignment, as shown in the center in the box-align tableShow center alignment, as shown in stretch in box-align, stretched to 3 higher than the parent container, 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)
Box model Display:-webkit-box; (ext.)
