Detailed CSS3 display:box Box model properties

Display:box is the CSS3 new box model attribute, the classic layout application is the vertical height of the layout, split horizontally, proportionally.

Currently Box-flex properties are not fully supported by Firefox, Opera, or Chrome, but they can be used to define Firefox (-moz-), opera (-o-), Chrome/safari (-webkit-) using their private properties.

First, Box-flex properties

1. Horizontal Equal width box

Code:

Display effect:


Description: The parent element style must use Display:box to divide the child elements within the parent container; child element styles use the Box-flex property to specify the percentage (copies) of the parent container. The above is the equal width division, three sub-container properties box-flex:1; In total, the parent container is divided into three parts by width, so the sub-container is the equal-width division.

Note: If Display:box is set, the container is defined for inline elements, and using margin:0px Auto to center It is not valid, so that it can be centered only through the text-align:center of its parent container.

2. Custom dividing width ratio

Box-flex:1 the above CSS code and change it to a different ratio.

Code:

<style>.wrap{    width:600px;    height:200px;    Display:box;    Display:-moz-box;    Display:-webkit-box;    Text-align:center;}. sectionone{    Background:orange;    box-flex:1;    -moz-box-flex:1;    -webkit-box-flex:1;}. sectiontwo{    background:purple;    Box-flex:2;    -moz-box-flex:2;    -webkit-box-flex:2;}. sectionthree{    Background:green;    Box-flex:3;    -moz-box-flex:3;    -webkit-box-flex:3;} </style>
Display effect:


Description: Self-understanding.

3. Processing of fixed-width sub-elements (fixed width margin)

If one or more child elements in the parent element are set to a fixed width, the other sub-elements are not set, and are calculated by fixing the width value of the fixed-width child element to the set value, and the other sub-elements that are not set are divided by the allocated proportions based on the remaining widths of the parent element width-All fixed-width child elements.

Code (the above code is changed):

. sectionone{    Background:orange;    width:300px;//Set Fixed Width}
Display effect:


If margin is set, the margin is also fixed in width, leaving the width to be divided.

Code (the above code is changed):

<style>.wrap{    width:600px;    height:200px;    Display:box;    Display:-moz-box;    Display:-webkit-box;    Text-align:center;}. sectionone{    Background:orange;    box-flex:1;    -moz-box-flex:1;    -webkit-box-flex:1;}. sectiontwo{    background:purple;    box-flex:1;    -moz-box-flex:1;    -webkit-box-flex:1;    margin:0 50px;//Add margin width}.sectionthree{    background:green;    box-flex:1;    -moz-box-flex:1;    -webkit-box-flex:1;} </style>
Display effect:


The width of each block is minus the left and right margin:100px after the 166.7px, rather than 200px, in the layout is also the distribution.


Second, box other properties

Other properties include: Box-orient | box-direction | Box-align | Box-pack | Box-lines.


1.box-orient Property Action: Determines how the parent element lining elements are arranged, horizontally or vertically.

Property Value: Horizontal | Vertical | Inline-axis | Block-axis | Inherit


If the parent element is box-orient:horizontal, or box-orient:inline-axis, and the child element is arranged horizontally, the width of the parent element is divided. (At this point, if the parent element defines a height value, the height value of its child elements is set to an invalid state, the height of all child elements equals the height of the parent element, and if the parent element does not set the height value, the height value of its child elements is valid and the height of the child of the maximum height value is taken.) The height of the pro-Test child element overflows the height of the parent element setting, and each child element holds its own set height, inconsistent, and the instructions in parentheses are to be verified, and the code and display results are as follows.

Code:

<style>.wrap{    width:600px;    height:200px;    Display:box;    Display:-moz-box;    Display:-webkit-box;    Text-align:center;    -moz-box-orient:inline-axis;    -webkit-box-orient:inline-axis;}. sectionone{    Background:orange;    height:100px;    box-flex:1;    -moz-box-flex:1;    -webkit-box-flex:1;}. sectiontwo{    background:purple;    height:200px;    box-flex:1;    -moz-box-flex:1;    -webkit-box-flex:1;}. sectionthree{    Background:green;    height:300px;    box-flex:1;    -moz-box-flex:1;    -webkit-box-flex:1;} </style>
Display effect:


If the parent element is box-orient:vertical;l or Box-orient:block-axis; (this property is the default), the child elements are arranged vertically, dividing the height of the parent element. (If the parent element defines a width value, the width value of its child elements is set to an invalid state, and if the parent element does not set a width value, the width value of its child elements is valid and the width of the child elements of the maximum width value is taken.) As above, the width of the pro-Test child element overflows the height set by the parent element, and each child element holds its own set width, inconsistent, the instructions in parentheses are to be verified, and the code and display results are as follows.

Code:

<style>.wrap{    width:600px;    height:200px;    Display:box;    Display:-moz-box;    Display:-webkit-box;    Text-align:center;    -moz-box-orient:vertical;    -webkit-box-orient:vertical;}. sectionone{    Background:orange;    width:500px;    box-flex:1;    -moz-box-flex:1;    -webkit-box-flex:1;}. sectiontwo{    background:purple;    width:600px;    box-flex:1;    -moz-box-flex:1;    -webkit-box-flex:1;}. sectionthree{    Background:green;    width:700px;    box-flex:1;    -moz-box-flex:1;    -webkit-box-flex:1;} </style>
Display effect:


Box-orient:inherit; set to inherit the value of the parent element.


2, Box-direction

Attribute: Determines the order in which child elements in the parent element are arranged, in normal or reversed order.

Property value: Normal | Reverse | Inherit

The property value is well understood, the parent element attribute Box-direction:normal, the child elements are arranged in the normal order of the HTML tags, box-direction:reverse, and the child elements are arranged in reverse (reverse order) Order, Box-direction: Inherit; refers to the change of the inherited parent element. Show the effect directly.

Display effect (positive order):


Display effect (reverse order):


3.box-align

Attribute: Determines the vertical alignment of the face element in the parent element.

Property Value: Start | End | Center | Baseline | Stretch

Box-align:start; represents the top-aligned child element, showing the effect:


Box-align:end; represents the bottom alignment of a child element, showing the effect:


Box-align:center: Represents the center alignment of a child element, showing the effect


4, Box-pack

Attribute: Determines the horizontal alignment of the fixed-width child elements inside the parent element.

Property Value: Start | End | Center | Justify

Code:

<style>.wrap{    width:600px;    height:200px;    Display:box;    Display:-moz-box;    Display:-webkit-box;    Text-align:center;    border:1px solid Brown;    -webkit-box-pack:justify;}. Wrap section{    width:100px;  }. sectionone{    Background:orange;}. sectiontwo{    background:purple;}. sectionthree{    Background:green;} </style>
Box-pack:start; indicates that the child element is left aligned to the overall horizontal, showing the effect:


Box-pack:end; indicates that the child elements are aligned to the right, showing the effect:


Box-pack:center: Indicates the overall center alignment of the child elements, showing the effect.


Box-pack:justify; indicates that the child elements are horizontally equal to the width of the parent element, showing the effect: