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

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

1. New 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. New Version

The new version of Flexbox is a draft of work proposed in September 2012, which is the latest syntax introduced by W3C. This version is determined to specify standards to make new browsers fully compatible and will be unified in future browser upgrades.

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

Attribute Value	Description
Flex	Use the container box model as a block-level elastic expansion box display (new version)
Inline-flex	Use the container box model as an inline scalable box display (new version)

// Most do not require a prefix

p {    display: flex;}

Attribute	IE	Firefox	Chrome	Opera	Safari
Prefix	None	None	21 ~ 28	None	7.0
Without a prefix	11 +	20 +	29 +	12.1	None

From this table, we can see that only the Chrome and Safari versions of the webkit engine need to be added-webkit-, and Chrome 29 versions can be omitted later.

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 {    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 {    flex-flow: row wrap;}

4. justify-content

The justify-content attribute is the same as the box-pack attribute in the old version. You can set the scaling project's method.

// Align with the center

p {    justify-content: space-around;}

Attribute Value	Description
Flex-start	The scaling project depends on the start point
Flex-end	The scaling project depends on the end point
Center	The scaling project is aligned with the central point
Space-	Scaling project draw distribution
Space-around	Same as above, but the two ends retain half of the space

5. align-items

The align-items 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 {    align-itmes: center;}

Attribute Value	Description
Flex-start	The scaling project uses the top as the benchmark to clear the additional space in the lower part.
Flex-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. align-self

Like align-self, align-items clears extra space, but it sets a single scaling project. All values are the same as those of align-itmes.

// Separate settings to clear extra space

p:nth-child(2) {    align-self: center;}

7. 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) {    flex: 1;}p:nth-child(2) {    flex: 3;}p:nth-child(3) {    flex: 1;}

8. order

The order attribute is the same as the box-ordinal-group attribute to control the order in which a scaling project appears.

// Set the scaling project Sequence

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