CSS3 Elastic Scaling Layout (medium)--flexbox layout

Mixed transition version

We mainly talk about the old version of the box layout, today this article mainly talk about Flexbox layout.

The mixed version of the Flexbox model is a draft of the work proposed in 2011, primarily for the IE10 browser, which has the same functionality as the older version.

Here we still use the previous document, using the hybrid transition code to achieve the IE10 of the expansion layout.

First, we want to set the display property of the telescopic box, which has two values

Because it is for IE10 browser, Chrome,firefox,opera does not support, so we use IE browser to do the test

div{    display:-ms-flexbox;}

Let's test the properties of the transition version below.

1.flex-direction

Flex-direction, like the Box-orient property in our last blog post, sets the arrangement of the scaling items

Four values, let's all try.

-ms-flex-direction:row;

-ms-flex-direction:row-reverse;

-ms-flex-direction:column;

-ms-flex-direction:column-reverse;

2.flex-wrap

Similar to the old version of Base-line, but I did not speak Base-line in the previous article, because there is no browser support it

When we zoom out of the browser, the default effect is as follows, no line break

-ms-flex-wrap:nowwrap;

-ms-flex-wrap:wrap;//line break

-ms-flex-wrap:wrap-reverse;//Wrap, change to previous line

3.flex-flow

Shorthand for the previous two properties

-ms-flex-flow:row Wrap;

4.flex-pack

Flex-pack and the previous version of Box-pack, set how the project is distributed

Just try one.

-ms-flex-pack:end;

5.flex-align

With the old version of Box-align, set the extra space to handle the scaling project

We just try the center, and other readers can try it on their own.

-ms-flex-align:center;

6.flex

With older versions of Box-flex, set the scale of the allocated scaling items

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

7.flex-order

Same old version of Box-ordinal-group, used to control the order in which scaling items appear

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

Summary

This is the end of the transition version, the next version of the Flex layout is the play, remember to continue to pay attention to Oh!

CSS3 Flex Layout (middle)--flexbox layout