CSS3 Elastic Scaling layout (bottom)--flex layout

New version

The new version of the Flex layout model is the work of the September 2012 draft, which is the latest syntax introduced by the web, which is determined to specify the standard, so that the new browser fully compatible, in the future of the browser update to achieve unity.

Currently, most browsers are supported. Browser support conditions can be viewed here to support flex scenarios

//html Code Section
<Div>        <P>I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm a Wu Guanglin I'm the one Wu Guanglin I'm the Wu Guanglin I'm the one Wu Guanglin</P>        <P>I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm the Wu Guanglin I'm Wu Guanglin I'm the Wu Guanglin I'm the I'm the Wu Guanglin I am Wu Guanglin I am Wu Guanglin I am Wu Guanglin I am Wu Guanglin I am Wu Guanglin</P>        <P>I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm Wu Guanglin I'm a Wu Guanglin I'm Wu Guanglin I'm the Wu Guanglin I'm the one I'm Wu Guanglin I'm Wu Guanglin I'm the Wu Guanglin I'm the one I'm the one Wu Guanglin</P>    </Div>

CSS Section
p{    width:150px;    margin:5px;    padding:5px;    border:1px solid gray;    Background:silver;}

Attribute details

First, as before, set the display property of the telescopic box with the following two values

div{    Display:flex;}

Note that when set to flex layout, the float , and attributes of child elements clear vertical-align are invalidated

Next we'll test the properties of the flex layout

1.flex-direction

With older versions of Box-orient, set the arrangement of the scaling items

Let's try all four of our values.

Flex-direction:row;

Flex-direction:row-reverse;

Flex-direction:column;

Flex-direction:column-reverse;

2.flex-wrap

Set line wrapping, similar to older versions of Base-line, but older versions of Base-line do not have browser support

Flex-wrap:nowrap;

Flex-wrap:wrap;

Flex-wrap:wrap-reverse;

3.flex-flow

The shorthand form of flex-direction and Flex-wrap.

Flex-flow:row Wrap;

4.justify-content

With the old version of Box-pack, set the alignment of the scaling project, or the distribution method.

Try every value.

Justify-content:flex-start;

Justify-content:flex-end;

Justify-content:center;

Justify-content:space-between;

Justify-content:space-around;

5.align-items

Clean up the extra space for the telescopic project container, with the old version box-align

Still the same, each value is tried

Align-items:flex-start;

Align-items:flex-end;

Align-items:center;

Align-items:baseline;

Align-items:stretch;

6.align-self

Align-self and Align-item are all clean up extra space, but it is cleaned separately

P:nth-child (1) {    align-self:center;}

7.flex

Same as Legacy Box-flex, used to control scale distribution of scaling projects

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

8.order

With Legacy Box-ordinal-group, control the order in which scaling items appear

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

Summary

Of course the flex layout is much more than that, and more content can be found in the official documentation: HTTPS://WWW.W3.ORG/TR/CSS-FLEXBOX-1/

If you think I'm not good, you can also look at foyer of this Flex Layout tutorial blog, hope to be helpful to you.

All right, three articles about elastic layout Finally, I hope you can use the Flex layout, make your compatible response layout page.

CSS3 Elastic Scaling layout (bottom)--flex layout