38.CSS3 Elastic Telescopic Layout "in"

29th Chapter CSS3 Elastic Telescopic Layout "in"

One, mixing filter plate (mainly for IE10 Browser Scaling layout effect)

first, set the display of the telescopic box to have the following two attribute values

(1)flexbox Container box model as block-level elastic telescopic box display (mixed version)

(2)inline-flexbox the container box model as an inline-level elastic telescopic box display (mixed version)

IE prefix required -ms-

div{

Display:-ms-flexbox;

}

1. Theflex-direction property is the same as the old version box-orient Property, which sets the arrangement of the scaling items

set up from top down

div{

-ms-flex-direction:column

}

(1) Row settings are arranged from left to right

(2) Row-reverse set from right to left

(3) Column setting is arranged from top to bottom

(4) Column-reverse settings from bottom to top

2,flex-wrap property similar to the old version of the bow-lines, but box-lines We did not explain, The reason is that no browsers support him

Auto-wrap when settings cannot be accommodated

div{

-ms-flex-wrap:wrap;

}

(1) nowrap default value, all in one row or column display

* (2) Wrap extension items cannot be accommodated when wrapping.

(3) Wrap-reverse Telescopic item cannot be accommodated, auto wrap, direction and wrap opposite

3. Theflex-flow attribute is a shorthand for arranging direction and controlling line breaks

Shorthand Form

div{

-ms-flex-flow:row wrap;

}

4,flex-pack Properties as in the previous version of the box-pack , set the alignment of the scaling project

Align by center

div{

-ms-flex-pack:Center;

}

(1) Start scaling project is aligned at the starting point

(2) End scaling project to end point snapping

(3) Center scaling Project is aligned with central point

(4) Justify Telescopic project draw distribution

5. Theflex-align property, like box-align in older versions , handles the additional space of the Telescopic project container

Handling Additional space

div{

-ms-flex-align:Center;

}

(1) Start Telescopic project with the top as the benchmark to clean up the lower additional space

(2) End telescopic project to clean up extra space with bottom base

(3) Center scaling project centered on the central, the average clean up the upper and lower part of the loving space

(4) Baseline scaling project to clean up additional space by baseline

(5) Stretch Telescopic project fills the entire container, default

6,Flex properties are similar to Box-flex in older versions to control proportional distribution of telescopic containers

set up a 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 properties and box-ordinal-group Properties control the order in which the scaling items appear

set the order of scaling items

P:nth-child (1) {

-ms-flex-order:2;

}

P:nth-child (2) {

-ms-flex-order:3;

}

P:nth-child (3) {

-ms-flex-order:1;

}

38.CSS3 Elastic Telescopic Layout "in"