CSS3 Elastic Box Model
CSS3 Property Collection
Box-orient Sets or retrieves the arrangement of child elements of a flexible box model object.
Box-pack Sets or retrieves the alignment of the child elements of a flexible box model object.
Box-align Sets or retrieves the alignment of the child elements of a flexible box model object.
Box-flex Sets or retrieves how the child elements of the elastic box model object allocate their remaining space.
Box-direction Sets or retrieves whether the order of the child elements of a flexible box model object is reversed.
To make the Elastic box model properties Effective, define the parameter values for the parent element display as box or Inline-box.
The use of 1.box-flex sets or retrieves how the child elements of a flexible box model object allocate their remaining space
1.1 Child elements do not have a fixed width, a1,a2,a3, according to a certain proportion of the display, such as
. one{
width:500px;
margin:0 Auto;
height:200px;
Background:rgba (51,51,51,0.2);
Display:-webkit-box;
Display:-moz-box;
Display:box;
}
. a1{
-moz-box-flex:1;
-webkit-box-flex:1;
Box-flex:1;
Background:rgba (255,0,0,1);
}
. a2{
-moz-box-flex:2;
-webkit-box-flex:2;
Box-flex:2;
Background:rgba (0,255,0,1);
}
. a3{
-moz-box-flex:2;
-webkit-box-flex:2;
Box-flex:2;
Background:rgba (0,0,255,1);
}
1.2 Molecular elements have a fixed width, and there are writers, etc., in the use of Box-flex, first of all, the element occupies the space to be removed, in the proportional division, for example: B1 width of 200px,b2 of the left and right margin for the 20px,two width of 500px,b2, B3 will be divided according to the 500px-200px-20*2px width,
. two{
width:500px;
margin:10px Auto;
height:200px;
Background:rgba (51,51,51,0.2);
Display:-webkit-box;
Display:-moz-box;
Display:box;
Box-sizing:border-box;
padding:20px;
}
. b1{
width:200px;
Background:rgba (255,0,0,1);
}
. b2{
-moz-box-flex:2;
-webkit-box-flex:2;
Box-flex:2;
margin:0 20px;
Background:rgba (0,255,0,1);
}
. b3{
-moz-box-flex:2;
-webkit-box-flex:2;
Box-flex:2;
Background:rgba (0,0,255,1);
}
2. Box-orient application, set or retrieve the arrangement of the child elements of the elastic box model object.
There are two ways of arranging, horizontal and vertical
Box-orient:horizontal Horizontal Arrangement
Box-orient:vertical vertical Arrangement
. three{
width:500px;
margin:10px Auto;
height:200px;
Background:rgba (51,51,51,0.2);
Display:-webkit-box;
Display:-moz-box;
Display:box;
Box-sizing:border-box;
padding:20px;
-webkit-box-orient:horizontal; /* Horizontal arrangement */
-moz-box-orient:horizontal;
Box-orient:horizontal;
-webkit-box-orient:vertical; /* Vertical Arrangement */
-moz-box-orient:vertical;
box-orient:vertical;
}
. c1{
width:200px;
height:30px;
Background:rgba (255,0,0,1);
}
. c2{
-moz-box-flex:2;
-webkit-box-flex:2;
Box-flex:2;
margin:20px 0;
Background:rgba (0,255,0,1);
}
. c3{
-moz-box-flex:2;
-webkit-box-flex:2;
Box-flex:2;
Background:rgba (0,0,255,1);
}
Vertical arrangement
Horizontal arrangement
3. Use of box-direction to set or retrieve the order of the child elements of a flexible box model object is reversed
Box-direction:normal; Normal order
Box-direction:reverse; In reverse order
. four{
width:500px;
margin:10px Auto;
height:200px;
Background:rgba (51,51,51,0.2);
Display:-webkit-box;
Display:-moz-box;
Display:box;
Box-sizing:border-box;
padding:20px;
-webkit-box-direction:normal; /* Normal arrangement */
-moz-box-direction:normal;
Box-direction:normal;
-webkit-box-direction:reverse; /* Reverse Arrange */
-moz-box-direction:reverse;
Box-direction:reverse;
}
. d1{
width:200px;
Background:rgba (255,0,0,1);
}
. d2{
-moz-box-flex:2;
-webkit-box-flex:2;
Box-flex:2;
Background:rgba (0,255,0,1);
}
. d3{
-moz-box-flex:2;
-webkit-box-flex:2;
Box-flex:2;
Background:rgba (0,0,255,1);
}
In turn displays
Normal display
4. Box-align use, set or retrieve the alignment of the child elements of the elastic box model object.
Start: Sets the child elements of the elastic box model object to align from the start position
Center: Sets the center alignment of the child elements of the elastic box model object
End: Sets the child elements of the elastic box model object to align from the end position
Baseline: Set the child element baseline alignment for a flexible box model object
Stretch: Set the child elements of a flexible box model object Adaptive Parent element dimensions
. five{
width:500px;
margin:10px Auto;
height:200px;
Background:rgba (51,51,51,0.2);
Display:-webkit-box;
Display:-moz-box;
Display:box;
Box-sizing:border-box;
padding:20px;
-webkit-box-align:start; /* Set the child elements of the elastic box model object to align from the start position */
-moz-box-align:start;
Box-align:start;
-webkit-box-align:center; /* Set the child elements of the elastic box model object to center-align */
-moz-box-align:center;
Box-align:center;
-webkit-box-align:end; /* Set the child elements of the elastic box model object to align from the end position */
-moz-box-align:end;
Box-align:end;
-webkit-box-align:baseline; /* Set the child element baseline alignment of the Elastic box model Object */
-moz-box-align:baseline;
Box-align:baseline;
-webkit-box-align:stretch; /* Set the child elements of the elastic box model object to adaptive parent element size */
-moz-box-align:stretch;
Box-align:stretch;
}
. e1{
width:200px;
height:90px;
Background:rgba (255,0,0,1);
}
. e2{
height:120px;
-moz-box-flex:2;
-webkit-box-flex:2;
Box-flex:2;
Background:rgba (0,255,0,1);
}
. e3{
height:90px;
-moz-box-flex:2;
-webkit-box-flex:2;
Box-flex:2;
Background:rgba (0,0,255,1);
}
Start
Center
End
Baseline
Stretch
5. Box-pack Sets or retrieves the alignment of the child elements of the elastic box model object.
Start: The child elements of the elastic box model object are aligned from the start position (most of the cases are the same as left-justified)
Center: Sets the center alignment of the child elements of the elastic box model object
End: Sets the child elements of the elastic box model object to align from the end position (most of the cases are equal to right)
Justify: Sets or snaps the child elements of a model object to the elastic box
. six{
width:500px;
margin:10px Auto;
height:200px;
Background:rgba (51,51,51,0.2);
Display:-webkit-box;
Display:-moz-box;
Display:box;
Box-sizing:border-box;
padding:20px;
-webkit-box-pack:start; /* Set the child elements of the Flex-box model object to align from the start position (most of the same is left-justified) */
-moz-box-pack:start;
Box-pack:start;
-webkit-box-pack:center; /* Set the child elements of the elastic box model object to center-align */
-moz-box-pack:center;
Box-pack:center;
-webkit-box-pack:end; /* Set the child elements of the elastic box model object to align from the end position (most of the cases are equal to right) */
-moz-box-pack:end;
Box-pack:end;
-webkit-box-pack:justify; /* Sets or aligns the child elements of the Elastic box model Object */
-moz-box-pack:justify;
box-pack:justify;
}
. f1{
width:200px;
Background:rgba (255,0,0,1);
}
. f2{
width:50px;
Background:rgba (0,255,0,1);
}
. f3{
width:90px;
Background:rgba (0,0,255,1);
}
Start
Center
End
Juatify
CSS3 Elastic Box model