CSS3 Elastic Box Model

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.