Css3 elastic box model-review ., Css3 box model review

Css3 elastic box model-review ., Css3 box model review

　　1. The box-flex attribute specifies whether the child element of the box can be scaled.
　　　　The parent element must declare the display: box and sub-element to use box-flex.
Syntax: box-flex: value;
Example:
<Style>
. Test_box {display:-moz-box; display:-webkit-box; display: box; width: 800px; margin: 40px auto; padding: 20px;
Background: # f0f3f9 ;}
. List {padding: 0 1em; font: bold 36px/200px monaco; text-shadow: 1px 1px # eee ;}
. List_one {-moz-box-flex: 1;-webkit-box-flex: 1; box-flex: 1; background-color: yellow ;}
. List_two {-moz-box-flex: 2;-webkit-box-flex: 2; box-flex: 2; background-color: #99CC00 ;}
. List_three {-moz-box-flex: 1;-webkit-box-flex: 1; box-flex: 1; background-color: paleturquoise ;}
</Style>
<Div class = "test_box">
<Div class = "list list_two"> 1 </div>
<Div class = "list list_one"> 2 </div>
<Div class = "list list_three"> 3 </div>
</Div>
Result: Image

　　　　

　　　　You can specify the width of a child element and divide the remaining parts equally.
Example:
<Style>
. Test_box {display:-moz-box; display:-webkit-box; display: box; width: 800px; margin: 40px auto; padding: 20px;
Background: # f0f3f9 ;}
. List {padding: 0 1em; font: bold 36px/200px monaco;
Text-shadow: 1px 1px # eee ;}
. List_one {-moz-box-flex: 1;-webkit-box-flex: 1; box-flex: 1; background: #00CC99 ;}
. List_two {-moz-box-flex: 2;-webkit-box-flex: 2; box-flex: 2; background: #99FF00 ;}
. List_w300 {width: 300px; background: # CCCCFF}
</Style>
<Div class = "test_box">
<Div class = "list list_two"> 1 </div>
<Div class = "list list_one"> 2 </div>
<Div class = "list list_w300"> 3 </div>
</Div>
Result: Image

　　　　　　

　　2. box-orient
　　　　Used to determine the direction of the child element, whether it is horizontal or vertical.
Value Options: horizontal | vertical | inline-axis | box-axis | inherit inline-axis. The default value is horizonta inline-axis.
Box-axis makes the element column the same.
Example:
<Style>
. Test_box {width: 300px; margin: 0 auto; display:-moz-box;
Display:-webkit-box; display: box; box-orient: horizontal; padding: 20px; background: # f0f3f9 ;}
. List {padding: 0 1em; font: bold 36px/120px monaco; text-shadow: 1px 1px # eee;-webkit-box-flex: 1 ;}
. One {background: #99FF00 ;}
. Two {background: #00CC99}
. Three {background: # CCCC00}
</Style>
<Div class = "test_box">
<Div class = "list one"> 1 </div>
<Div class = "list two"> 2 </div>
<Div class = "list three"> 3 </div>
</Div>
Result:

　　3. box-direction
　　　　Used to determine the order of sub-elements. Optional values:
Onrmal | revers | inherit onrmal is the default value in the normal order, from left to right
From the beginning to the end, revers indicates reverse.
Example:
<Style>
. Test_box {display:-moz-box; display:-webkit-box; display: box;-moz-box-direction: reverse;-webkit-box-direction: reverse;
Box-direction: reverse; width: 300px; margin: 20px auto; padding: 10px; background: # f0f3f9 ;}
. List {padding: 0 1em; font: bold 36px/150px monaco; text-shadow: 1px 1px # eee ;}
. List_one {-moz-box-flex: 1;-webkit-box-flex: 1; box-flex: 1; background: yellow ;}
. List_two {-moz-box-flex: 2;-webkit-box-flex: 2; box-flex: 2; background: #99CC00 ;}
. Three {background: # CCCCFF}
</Style>
<Div class = "test_box">
<Div class = "list list_two"> 1 </div>
<Div class = "list list_one"> 2 </div>
<Div class = "list list_one three"> 3 </div>
</Div>
Result:

　　　　

　　4. box-align and box-pack
　　　Determines how to use the remaining space inside the box, and the behavior effect is alignment.
Box-align indicates space utilization in the vertical direction, and box-pack indicates space utilization in the horizontal direction.
Box-align: optional parameter: start | end | center | baseline | stretch
Stretch indicates how high the height of the parent label is by default, and how high the child element is. Start indicates bottom edge alignment
End is the bottom alignment, center alignment, and baseline alignment.
Example:
<Style>
. Test_box {margin: 0 auto; display:-moz-box; display:-webkit-box;
Display:-o-box; display: box;-moz-box-align: end;
-Webkit-box-align: end;-o-box-align: end;
Width: 300px; height: 200px; padding: 20px; background: # f0f3f9 ;}
. List {padding: 0 1em; font: bold 36px/120px monaco; text-shadow: 1px 1px # eee ;}
. One {background: #99FF00 ;}
. Two {background: #00CC99}
. Three {background: # CCCC00}
</Style>
<Div class = "test_box">
<Div class = "list one"> 1 </div>
<Div class = "list two">

　　　　Box-pack value options: start | end | center | justify
Start is the default value. justify indicates that the two ends are aligned.
Example:
<Style>
. Test_box {margin: 0 auto; display:-moz-box; display:-webkit-box;
Display:-o-box; display: box;-moz-box-pack: justify;
-Webkit-box-pack: justify;-o-box-pack: justify;
Width: 300px; height: 200px; padding: 20px; background: # f0f3f9 ;}
. List {padding: 0 1em; font: bold 36px/120px monaco;
Text-shadow: 1px 1px # eee ;}
. One {background: #99FF00 ;}
. Two {background: #00CC99}
. Three {background: # CCCC00}
</Style>
<Div class = "test_box">
<Div class = "list one"> 1 </div>
<Div class = "list two">

　5. box-lines
　　　　Used to determine whether the stator element can be displayed with a line break. There are two optional values: single | mutiple
Default Value of single, no line break. Mutiple line feed multi-line display.
Example:
<Style>
. Test_box {margin: 0 auto; display:-moz-box; display:-webkit-box;
Display:-o-box; display: box;-moz-box-lines: multiple;
-Webkit-box-lines: multiple;-o-box-lines: multiple;
Box-lines: multiple; width: 300px;
Height: 200px; padding: 20px; background: # f0f3f9 ;}
. List {padding: 0 1em; font: bold 36px/120px monaco; text-shadow: 1px 1px # eee ;}
. One {background: #99FF00 ;}
. Two {background: #00CC99}
. Three {background: # CCCC00}
</Style>
<Div class = "test_box">
<Div class = "list one"> 1 </div>
<Div class = "list two">

　6. box-ordinal-group
　　　　Change the sequence of sub-elements. The value is a number, and the smaller the number, the more advanced it is.
Example:
<Style>
. Test_box {display:-moz-box; display:-webkit-box; display: box;
Width: 300px; margin: 40px auto; padding: 20px; background: # f0f3f9 ;}
. List {padding: 0 1em; font: bold 36px/200px monaco; text-shadow: 1px 1px # eee ;}
. List_one {-moz-box-flex: 1;-webkit-box-flex: 1; box-flex: 1;
-Moz-box-ordinal-group: 1;-webkit-box-ordinal-group: 1; box-ordinal-group: 1; background: #99CC00 ;}
. List_two {-moz-box-flex: 2;-webkit-box-flex: 2; box-flex: 2;-moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2;
Box-ordinal-group: 2; background: # CC33CC ;}
. Three {background: # CCCC00}
</Style>
<Div class = "test_box">
<Div class = "list list_two"> 1 </div>
<Div class = "list list_one"> 2 </div>
<Div class = "list list_one three"> 3 </div>
</Div>
Result:

　　　　

Demo download https://github.com/ningmengxs/css3.git