CSS3 Elastic Telescopic Layout

CSS3 offers a new layout: The Flexbox layout, the elastic scaling layout model (flexible Box). Used to provide a more efficient way to implement responsive layouts. However, this layout is still in the draft stage, and it is divided into the old version, the new version and the hybrid transition version of three different encoding methods. There may be a variety of changes in development, and there are problems with browser compatibility.
First, let's look at the compatibility of older versions of browsers:

The above data, we are excerpted from the CSS3 manual. Of course, different textbooks and articles will be slightly different. But the error rate of one to two versions, the impact is not small.
First, the first step: Create a piece of content, divided into three regions.

HTML section
<div>
<p> First paragraph content ...</p>
<p> Second paragraph content ...</p>
<p> Third paragraph content ...</p>
</div>

CSS section
p {
width:150px;
border:1px solid Gray; Background-color:silver; margin:5px;
padding:5px;
}

div {
Display:-moz-box; Display:-webkit-box; Display:box;
}

With the above settings, the layout is distributed horizontally in addition to IE browsers. So below, let's focus on the implications of these attributes.

Older versions
If the property and property values are: Display:box, then the working draft, which was set up in July 2009, belongs to the old version. It is geared toward the resilient layout of some early browsers.
First, we'll set the container properties display for a few of the parent elements that need the layout module.

We know the block level, which occupies an entire line, similar to the <div> element, while the inline level does not occupy the entire row, like the <span> element. But we set the whole box, they don't occupy, keep it consistent.
To set the elasticity, take Firefox as an example div {
Display:-moz-box;
}

1.box-orient Property
The box-orient mainly realizes the flow direction of the inner elements of the box.
Set Vertical flow div {
-webkit-box-orient:vertical;
}

2.box-direction
The Box-direction property is primarily to set the flow order in the telescopic container.
Set reverse order
div {
-moz-box-direction:reverse;
}

3.box-pack
The Box-pack property is used to distribute the scaling items.
The distribution has ended in position by aligning Div {
-moz-box-pack:end;
}

4.box-align
The Box-align property is used to handle the extra space of the telescopic container.
Center align, clean up and down extra space div {
-moz-box-align:center;
}

5.box-flex
The Box-flex property can use floating-point numbers to distribute scaling items
Set the proportions of each scaling item P:nth-child (1) {
-moz-box-flex:1;
}
P:nth-child (2) {
-moz-box-flex:2.5;
}
P:nth-child (3) {
-moz-box-flex:1;
}

6.box-ordinal-group
The Box-ordinal-group property allows you to set the display position of the scaling item.
Jumps the first position element to the third position P:nth-child (1) {
-moz-box-ordinal-group:3;
}

Mixed transition version
The mixed version of the Flexbox model is a work draft proposed in 2011, primarily for the IE10 browser, which has the same functionality as the older versions. We also use the file from the previous lesson, and then using the hybrid transition code, to achieve the IE10 of the stretched layout.
First, set the display of the telescopic box to have the following two attribute values:

IE prefix required-ms-div {
Display:-ms-flexbox;
}

1.flex-direction
The Flex-direction property, like the old version Box-orient property, is the arrangement of the scaling items
Expression
Set up div {from top down
-ms-flex-direction:column;
}

2.flex-wrap
The Flex-wrap property is similar to the Box-lines in the old version, but box-lines we didn't explain it because there was no browser support for it.
When settings cannot be accommodated, the wrap div {
-ms-flex-wrap:wrap;
}

3.flex-flow
The Flex-flow property is a shorthand form that sets the direction of the arrangement and controls line breaks.
Abbreviated Form DIV {
-ms-flex-flow:row Wrap;
}

4.flex-pack
The Flex-pack property, like Box-pack in an older version, sets the way the scaling project works.
Align Div by center point {
-ms-flex-pack:center;
}

5.flex-align
The Flex-align property, like box-align in older versions, handles the extra space of the telescopic project container.
Processing Extra Space div {
-ms-flex-align:center;
}

6.flex
Flex properties are similar to Box-flex in older versions to control scale allocations for scaling containers.
Set the scale assignment P:nth-child (1) {
-ms-flex:1;
}
P:nth-child (2) {
-ms-flex:3;
}
P:nth-child (3) {
-ms-flex:1;
}

7.flex-order
The Flex-order property, like the Box-ordinal-group property, controls the order in which the scaling items appear.
Set the scaling item order P:nth-child (1) {
-ms-flex-order:2;
}
P:nth-child (2) {
-ms-flex-order:3;
}
P:nth-child (3) {
-ms-flex-order:1;
}

New version
The new version of the Flexbox model is a draft of the work proposed in September 2012, which is the latest grammar introduced by the consortium. This version is determined to specify the standard, so that the new browser fully compatible, in the future of the browser to achieve a unified update.
First, set the display of the telescopic box to have the following two attribute values:


3.flex-flow
The Flex-flow property is a shorthand form that sets the direction of the arrangement and controls line breaks.
Abbreviated Form DIV {
Flex-flow:row Wrap;
}

4.justify-content
The Justify-content property, like Box-pack in an older version, sets the way the scaling project works.
Align Div by center point {
Justify-content:space-around;
}

CSS3 Elastic Telescopic Layout