CSS3 Elastic Telescopic Layout (ii)--flex layout

Previous Blog "CSS3 Flex layout (i)--box layout" describes the previous version of the box layout, and this blog will focus on the latest version of the Flex layout basics.

Introduction to the new version

The new version of the Flexbox model is a draft of the work proposed in September 2012, which is the latest grammar introduced by the consortium. This version is determined to specify the standard, so that the new browser fully compatible with the future of the browser to achieve unity in the update.

Here we continue with an example from the previous blog, using the latest version of the flex layout to achieve the same effect.

HTML code:

<Div>    <P>Have happened to the space or look at the price Ha health Ah fruit and card cards more not to mention the planning of Kazakhstan's Ashes sprinkled a glorious casa is very clean AH is high-tech silly empty to take place or look at the price Ha health Ah fruit and card swipe not to mention planning Kazakhstan's Ashes sprinkled a bright Casa is very clean AH is high-tech silly empty to</P>    <P>Has happened to the space or look at the price Ha health Ah fruit and card swipe not to mention planning Kazakhstan's Ashes sprinkled a glorious casa is clean AH is high-tech silly empty to</P>    <P>Have happened to the space or look at the price Ha health Ah fruit and card swipe not to mention planning</P></Div>

The underlying CSS code:

P {    width:150px;     Border:3px solid LightBlue;     background:lightgreen;     padding:5px;     margin:5px;}

At this point we set the display property to flex for the DIV element:

Div {    display:flex;}

The effect after refreshing the browser is:

You can see that the effect is the same as the old version of-webkit-box.

There are two display property values that are set to the Flex box in the new version:

• Flex: Displays the container box model as a block-level flex-scale box
• Inline-flex: Display the container box model as an inline-level elastic telescopic box

Look at the browser compatibility of the new version of the Flex layout:

PS: As you can see, in some older WebKit kernel browsers (Chrome,safari), we need to use-webkit-flex to do compatibility, but here I omit.

The following describes the underlying usage of the various properties of the Flex layout:

Flex-direction Property

The Flex-direction property is used to set how the scaling items are arranged.

Div {    display:flex;     flex-direction:column;}

The effect is as follows:

The result is that all items in the container are arranged from top to bottom.

When you set it to Row-reverse, the effect is:

This is arranged from the right side of the browser to the left.

The property values for this property are:

• Row: Set left-to-right arrangement
• Row-reverse: Set the right-to-left arrangement
• Column: Set top-to-bottom arrangement
• Column-reverse: Set from bottom to top

You might as well try and see how each one works.

Flex-wrap Property

The Flex-wrap property sets the line wrapping method for the item (when the container is not wide enough to hold all the child items).

Div {    display:flex;     flex-wrap:wrap;}

This results in the following:

As you can see, when I zoom out of the browser window, the third P element is squeezed down because it doesn't fit.

The property values for this property are:

• NoWrap: Default value, all displayed in one row or column
• Wrap: Wrap When a telescopic item cannot be accommodated
• Wrap-reverse: The flex item cannot be accommodated when the line wraps, the direction and wrap are reversed

When I set the Flex-wrap property to Wrap-reverse, the effect after the run is this:

Flex-flow Property

The Flex-flow property is a shorthand property for the Flex-direction and Flex-wrap properties.

Div {    display:flex;     flex-flow:row wrap;}

The above example is equivalent to setting the flex-direction to Row,flex-wrap as wrap. The effect is this:

Justify-content Property

Justify-content the items within the container (horizontal) when the items in the flexible container do not occupy all the available space on the spindle.

Div {    display:flex;     justify-content:space-around;}

The effect is as follows:

You can see that all items are evenly distributed, and that there is half of space left on both ends.

The property values for this property are:

• Flex-start: The scaling Project is aligned at the starting point
• Flex-end: Scaling items Snap to end points
• Center: The scaling Project is aligned to a central point
• Space-between: Average distribution of telescopic projects
• Space-around: The scaling project is evenly distributed, but the two ends retain half the space

Because these effects are still easy to understand, I will not demonstrate here.

Align-items Property

The Align-items property specifies the default alignment of items within a flexible container, and, like box-align in older versions, handles the additional space of the telescopic project container.

Div {    display:flex;     align-items:center;}

The effect is as follows:

Then, the property values for this property are:

• Flex-start: The scaling project is based on the top and cleans up the additional space underneath
• Flex-end: The scaling project is based on the bottom to clean up the extra space above
• Center: Scaling projects are centered on the middle, with an average clean up of additional space on the top and bottom
• Baseline: Scaling projects base on baselines to clean up additional space
• Stretch: Scaling project fills the entire container, default value

These effects and the old version of the box-align is basically the same, how to use, you can try to find out.

Align-self Property

Align-self, like Align-items, are cleaning up extra space, but it's a separate set of scaling items. All values are consistent with align-itmes.

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

The effect at this point is:

The effect of other property values is the same as Align-items, which is not mentioned here.

Flex Properties

Flex properties are similar to Box-flex in older versions to control scale allocations for scaling containers.

{Flex: 1;}  {flex: 3;}  {flex: 1;}

The effect is as follows:

Order Property

The Order property controls the sequence in which the scaling items appear, just as the previous version of the Box-ordinal-group property.

{    order: 2;}  {    order: 3;}  {    order: 1;}

The effect is as follows:

Summarize

Although the flex layout is not very good at the moment, the future is definitely a hot layout. I also recently contacted the Flex layout, in order to consolidate these basic knowledge points, I wrote these two blog. Although I know that I did not summarize well, but mainly to facilitate themselves and those who have not yet contacted the flex layout of Bo friends.

At last

Here I recommend the two blog about flex layout written by Nanyi, which is very well written:

Flex Layout Tutorial: Syntax Chapter:

Http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex Layout Tutorial: Example:

Http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

If you need to reprint, please indicate the source, thank you!

CSS3 Elastic Telescopic Layout (ii)--flex layout