CSS3 Elastic Box Model

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