Chapter 2 CSS3 auto scaling layout [medium]-Original Water

Chapter 2 CSS3 auto scaling layout [medium]-original learning points of water:

1. Mixed version

Lecturer: Li Yanhui

This chapter mainly discusses the layout scheme of responsive auto scaling provided by CSS3 in HTML5. Here we will give a preliminary understanding.

I. Hybrid transitional Edition

The Flexbox model of the hybrid version was proposed in 2011. It mainly targets the scaling layout of IE10 browsers. Its functions are similar to those of earlier versions. We still use the document of the previous lesson, and then use the mixed Transitional Code to implement the IE10 scaling layout.

First, set the display value of the telescopic box to the following two attribute values:

Attribute Value	Description
Flexbox	Use the container box model as a block-level elastic expansion box display (mixed Version)
Inline-flexbox	Use the container box model as an in-line elastic expansion box display (mixed Version)

// Requires the IE prefix-ms-

p {    display: -ms-flexbox;}

1. flex-direction

The flex-direction attribute is the same as the box-orient attribute of the old version, and is used to set the arrangement of scaling projects.

// Set the order from top to bottom

p {    -ms-flex-direction: column;}

Attribute Value	Description
Row	Set left to right
Row-reverse	Set the right-to-left Arrangement
Column	Set top to bottom
Column-reverse	Set bottom-to-top Arrangement

2. flex-wrap

The flex-wrap attribute is similar to the box-lines attribute in the old version, but we didn't explain box-lines because it was not supported by a browser.

// Automatically wrap a line when the setting cannot accommodate

p {    -ms-flex-wrap: wrap;}

Attribute Value	Description
Nowrap	The default value is displayed in one or more columns.
Wrap	Automatic line feed when the scaling project cannot be accommodated
Wrap-reverse	Automatic line feed when the scaling project cannot accommodate; opposite to wrap

3. flex-flow

The flex-flow attribute is a collection of short form of arrangement direction and control line feed.

// Abbreviated form

p {    -ms-flex-flow: row wrap;}

4. flex-pack

The flex-pack attribute is the same as the box-pack attribute in the old version. You can set the method for scaling projects.

// Align with the center

p {    -ms-flex-pack: center;}

Attribute Value	Description
Start	The scaling project depends on the start point
End	The scaling project depends on the end point
Center	The scaling project is aligned with the central point
Justify	Scaling project draw distribution

5. flex-align

The flex-align attribute is the same as the box-align attribute in the old version to process additional space of the scaling project container.

// Process extra space

p {    -ms-flex-align: center;}

Attribute Value	Description
Start	The scaling project uses the top as the benchmark to clear the additional space in the lower part.
End	The scaling project uses the bottom as the benchmark to clear the extra space in the upper part.
Center	The scaling project uses the central part as the benchmark and clears the upper and lower parts of the additional space on average.
Baseline	The scaling project is baseline-based and additional space is cleared.
Stretch	The scaling project fills the entire container. The default value is

6. flex

The flex attribute is similar to the box-flex attribute in the old version and is used to control the proportional distribution of scaling containers.

// Set proportional distribution

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 attribute and the box-ordinal-group attribute control the order in which the scaling project appears.

// Set the scaling project Sequence

p:nth-child(1) {    -ms-flex-order: 2;}p:nth-child(2) {    -ms-flex-order: 3;}p:nth-child(3) {    -ms-flex-order: 1;}