In the previous article, "
technical details of elastic fluid box model in CSS3 (i.)"In, I gave you a list, from
Css1To
CSS3The basic elements of the box model in each version. In this article I will explain the rest of the properties in detail.
Box-pack Effect:Used to specify how the child elements are allocated horizontally within the box.
box-pack Syntax:Box-pack:start | End | Center | Justify
| Start |
For the normal direction of the box, the left edge of the first child element is adsorbed on the left border of the box to show the box in the opposite direction, and the right edge of the last child element is displayed in the box's right border. |
| End |
For the normal direction of the box, the right edge of the last child element is adsorbed on the right border of the box to show the box in the opposite direction, and the left edge of the first child element is displayed in the box's left border |
| Center |
Divide the remaining space equally, half before the first child element, and half after the last child element |
| Justify |
The child elements are adsorbed on the left and right border, and the middle sub-elements divide the extra space. |
Note:Because this property is still in the test, in order to be compatible with the WebKit core browser, you need to add
-webkit-Prefix, mozilla core browser, prefix required
-moz-。
Example:
Box-pack:start;
| . row{/* setting the perimeter container style * /Margin:auto;border:1px solid black;width:600px;height:400px;margin-top:50px; display:-webkit-box;/* compatible with WebKit or Mozilla Core Browser, enable flexible box model */Display:-moz-box;Display:box; -webkit-box-orient:horizontal;/* horizontal display, compatible with WebKit and Mozilla Core Browser */-moz-box-orient:horizontal;box-orient:horizontal; -webkit-box-align:center/* In the vertical direction, center display * /-moz-box-align:center;Box-align:center; -webkit-box-pack:start; * * In the horizontal direction, normally, from the left side of the display. */-moz-box-pack:start;Box-pack:start;} |
The effect is as follows: Of course, if the order of the box is from right to do, it will be adsorbed on the right side of the border display.
Box-pack:end;
| . row{/* setting the perimeter container style * /Margin:auto;border:1px solid black;width:600px;height:400px;margin-top:50px; display:-webkit-box;/* compatible with WebKit or Mozilla Core Browser, enable flexible box model */Display:-moz-box;Display:box; -webkit-box-orient:horizontal;/* horizontal display, compatible with WebKit and Mozilla Core Browser */-moz-box-orient:horizontal;box-orient:horizontal; -webkit-box-align:center/* In the vertical direction, center display * /-moz-box-align:center;Box-align:center; -webkit-box-pack: end;/* In the horizontal direction, normally, the adsorption is displayed on the right side. */-moz-box-pack: end;box-pack: end;} |
The effect is as follows: Note: If the display order in the box is in the opposite direction, it will be adsorbed on the left border display.
Box-pack:center
| . row{/* set the perimeter container style */margin:auto;border:1px solid black;width:600px;height:400px;margin-top:50px; display:-webkit-box ;/* compatible with WebKit or Mozilla Core Browser, enable flexible box model */display:-moz-box;display:box; -webkit-box-orient:horizontal;/* horizontal display, compatible with WebKit and Mozilla Core browser */-moz-box-orient:horizontal;box-orient:horizontal ; -webkit-box-align:center; /* In the vertical direction, the center display */-moz-box-align:center;box-align:center; -webkit-box-pack: Center;-moz-box-pack: Center; box-pack: Center;} |
The results are as follows:
box-pack:justify
| . row{/* setting the perimeter container style * /Margin:auto;border:1px solid black;width:600px;height:400px;margin-top:50px; display:-webkit-box;/* compatible with WebKit or Mozilla Core Browser, enable flexible box model */Display:-moz-box;Display:box; -webkit-box-orient:horizontal;/* horizontal display, compatible with WebKit and Mozilla Core Browser */-moz-box-orient:horizontal;box-orient:horizontal; -webkit-box-align:center/* In the vertical direction, center display * /-moz-box-align:center;Box-align:center; -webkit-box-pack: justify;/* In the horizontal direction, normally, from the left side of the display. */-moz-box-pack: justify;box-pack: justify;} |
The results are as follows:
box-directionRole: box-direction specifies in what direction the elements of the box are arranged. Box-direction Syntax: Box-direction:normal | Reverse | Inherit
| Normal |
Display child elements by default |
| Reverse |
Display child elements in the opposite direction |
| Inherit |
Inherit box-direction from parent container |
Note:Because this property is still in the test, in order to be compatible with the WebKit core browser, you need to add
-webkit-Prefix, mozilla core browser, prefix required
-moz-。 Example: Now I'm going to add the Box-direction attribute to the. Row of the stylesheet file, based on the example above, and observe the difference between them separately.
| Displays the child element box-orient:horizontal in a horizontal direction; |
| normal |
.row{/* set the perimeter container style */.../* HERE code omitted */ - webkit-box-orient:horizontal;/* Horizontal direction display, compatible with WebKit and Mozilla Core browser */-moz-box-orient:horizontal;box-orient:horizontal; -webkit-box-pack:justify; /* In the horizontal direction, normally, from the left side of the display. */-moz-box-pack:justify;box-pack:justify; -webkit-box-direction:normal; /* Display in normal direction */-moz-box-direction:normal; box-direction:normal; } |
|
Horizontal, left to right |
| Reverse |
. row{/* set the perimeter container style */... * * HERE code omitted */-webkit-box-orient:horizontal;/* horizontal direction display, compatible with WebKit and Mozilla Core browser */-moz-box-orient: Horizontal;box-orient:horizontal; -webkit-box-pack:justify; /* In the horizontal direction, normally, from the left side of the display. */-moz-box-pack:justify;box-pack:justify; -webkit-box-direction:reverse; /* display in the opposite direction */-moz-box-direction:reverse; box-direction:reverse;} |
|
After applying the Box-direction:reverse, the display direction is reversed.
It used to be from left to right, now it's from right to left. |
|
| Displays the child element box-orient:vertical in a vertical direction; |
| Normal |
. row{/* setting the perimeter container style */... * * HERE code omitted */-webkit-box-orient:vertical;/* vertical display, compatible with WebKit and Mozilla Core browser */-moz-box-orient: vertical;box-orient:vertical; -webkit-box-direction: normal;-moz-box-direction: normal; box-direction: normal;} |
|
As you can see, when a child element is displayed vertically, the normal property takes the default top-to-bottom display order. |
| Reverse |
. row{/* setting the perimeter container style */... * * HERE code omitted */-webkit-box-orient:vertical;/* vertical display, compatible with WebKit and Mozilla Core browser */-moz-box-orient: vertical;box-orient:vertical; -webkit-box-direction:reverse;-moz-box-direction:reverse;box-direction:reverse;} |
|
After applying the Box-direction:reverse, the display direction is reversed.
It used to be from top to bottom, now it's from bottom to top. |
|
From the above comparison, we can see that
Box-direction is based on the display direction (horizontal or vertical) of the current child element .。 Box-direction:inherit This everyone can test privately.
Box-flex Effect:The Box-flex property specifies whether the child elements within the box can automatically scale their dimensions, as long as there is space left in the corresponding display direction within the box, and the retractable elements expand to fill the space.
Box-flex Syntax:Box-flex:value.
| Value |
The flexible value of the element, the flexibility is relative, for example, the box-flex:2.0 of the child elements of the scaling size twice times the box-flex:1.0 child element |
Note:Because this property is still in the test, in order to be compatible with the WebKit core browser, you need to add
-webkit-Prefix, mozilla core browser, prefix required
-moz-。 Example: Now let's take a look at the role of Box-flex by example to prove it:
| Apply Style |
.sidebar{/* Add style to sidebar sidebar */ /* Sets the element with this style applied to be a retractable element */-webkit-box-flex:1.0; -moz-box-flex:1.0; box-flex:1.0; } .middle{/* add style to the middle area */ } .article{/* Add style */ to the main content;} |
|
|
| Apply Style |
.sidebar{/* /* the elements to which this style is applied are set to a scalable element */-webkit-box-flex:1.0;-moz-box-flex:1.0;box-flex:1.0;} .middle{/* adds a style to the middle area */ /* the elements to which this style is applied are set to a retractable element */-webkit-box-flex:2.0; -moz-box-flex:2.0; box-flex:2.0; } .article{/* add style to the main content */ } |
|
|
| Apply styles to Sidebar,middle and article |
. sidebar{/* Add Style to Sidebar */-webkit-box-flex: 1.0;-moz-box-flex:1.0; Box-flex: 1.0;}. middle{/ * Add style to Middle area */-webkit-box-flex:2.0; -moz-box-flex:2.0; Box-flex:2.0;} . article{/* add style to main content */-webkit-box-flex:3.0;-moz-box-flex:3.0; Box-flex: 3.0;} |
|
Here we have to pay attention, you may think,. Article should occupy 1/2 of the space, how to see. Sidebar and. Middle Plus, it's bigger than. Article. The principle here is that the remaining space is allocated according to the corresponding ratio. For sidebar, the retractable space = total remaining space * (1.0/6.0), for middle, the space to be stretched = total remaining space * (2.0/6.0), and for article, the space to be stretched = total remaining space * (3.0/6.0); |
Box-flex-group effect: A set of box-flex-group elements, the value of the smallest, occupy all the remaining space, the value is the smallest and equal, the average allocation of the remaining space.
| . sidebar{/* Add Style to Sidebar */-webkit-box-flex:1.0;-moz-box-flex:1.0; Box-flex: 1.0; -webkit-box-flex-group:1; -moz-box-flex-group:1; box-flex-group:1;} . middle{/* add style to middle area */-webkit-box-flex:2.0;-moz-box-flex:2.0;box-flex:2.0; -webkit-box-flex-group:2; -moz-box-flex-group:2; box-flex-group:2;} . article{/* add style to main content */-webkit-box-flex:2.0;-moz-box-flex:2.0; Box-flex: 2.0; -webkit-box-flex-group:1; -moz-box-flex-group:1; box-flex-group:1;} |
|
As you can see, if the value of the box-flex-group is large, it allocates only the actual space, and the remaining space is allocated to the smallest set of allocations by ratio. What do you mean by that sentence? We can see from the code: Sidebar's box-flex-group for 1,article Box-flex-group is also 1, so sidebar and article allocate the remaining space. But article Box-flex twice times the box-flex of sidebar, so the remaining space, article telescopic space should be sidebar expansion space of twice times. |
Box-ordinal-group effect: The Box-ordinal-group attribute allows us to set the order in which the sub elements are displayed, the values are small, and the values are in the top row.
Note:Because this property is still in the test, in order to be compatible with the WebKit core browser, you need to add
-webkit-Prefix, mozilla core browser, prefix required
-moz-。 Example: Let's take a look at the run effect without using the Box-ordinal-group property, the style code is as follows:
| . sidebar{/* Add Style to Sidebar */-webkit-box-flex:2.0;-moz-box-flex:2.0;box-flex:2.0; middle{/* add style to middle area */- webkit-box-flex:2.0; -moz-box-flex:2.0;box-flex:2.0;} . article{/* add style to main content */-webkit-box-flex:2.0;-moz-box-flex:2.0;box-flex:2.0;} |
Run the page at this point, as follows: According to the above page,
The current display order is sidebar, middle, articleNow we apply box-ordinal-group to these child elements, and the corresponding values
Middle < article < sidebar,The order in which we expect the display should be,
Middle, article, sidebarThe style code is as follows:
| . sidebar{/* Add Style to Sidebar */-webkit-box-flex:2.0;-moz-box-flex:2.0;box-flex:2.0; -webkit-box-ordinal-group:4; -moz-box-ordinal-group:4; box-ordinal-group:4;} . middle{/* add style to middle area */-webkit-box-flex:2.0;-moz-box-flex:2.0;box-flex:2.0; -webkit-box-ordinal-group:2; -moz-box-ordinal-group:2; box-ordinal-group:2;} . article{/* add style to main content */-webkit-box-flex:2.0;-moz-box-flex:2.0;box-flex:2.0; -webkit-box-ordinal-group:3; -moz-box-ordinal-group:3; box-ordinal-group:3;} |
Run the page with the following effect: From the point of view, it is indeed shown in the order we expect (
Middle, article, sidebar）。 At this point, CSS3 new Elastic box model properties are finished, this section is still more than the content, but it gave us a lot of surprises, let us in the page layout more retractable. In the next section, I'll talk about using the CSS3 elastic box model properties to teach you
"CSS3: Flexible Web Interface design (compatible with mobile browser)"。
welcome everyone to join the Internet Technology Exchange Group:62329335
Personal statement: share the blog, absolutely original, and strive to each knowledge point through the actual demonstration to verify. 
