Example of Box-flex Elastic box property layout in CSS3

The flex layout is undoubtedly the most powerful layout for today's Web pages, and the Box-flex elastic box model is one of the representatives, and here we explain the Box-flex flexible box model layout in CSS3

Box-flex is the new box model attribute CSS3, which breaks the floating layout we often use to achieve vertical, horizontal, and proportional partitioning. However, it has some limitations, in Firefox, Chrome browser need to use their private properties to define: Firefox (-moz), Chrome (-webkit).

First, Box-flex properties
Box-flex mainly allows the child containers to be divided according to a certain rule for the width of the parent container.

<p class= "box" >    <p class= "Col_1" >111</p>    <p class= "col_2" >222</p>    <p class= "Col_3" >333</p>   </p>   <style type= "Text/css" >   . Box {    display:box;    Display:-webkit-box;    Display:-moz-box;    Background-color: #fff;    width:500px;    height:100px;    border:1px solid #333;    margin:0 auto;   }   . Col_1 {    box-flex:1;    -moz-box-flex:1;    -webkit-box-flex:1;    Background-color: #ffc;   }   . col_2 {    background-color: #ccf;    Box-flex:2;    -moz-box-flex:2;    -webkit-box-flex:2;   }   . Col_3 {    background-color: #fcf;    Box-flex:2;    -moz-box-flex:2;    -webkit-box-flex:2;   }   </style>

Attention:
The parent container must be defined as Display:box, and its child containers can be divided (if Display:box is an inline element, using margin:0 Auto to center it in Firefox is not valid and needs to pass through the parent container's text-align: The center is to control. But it's possible under chrome)
In the example above, three sub-blocks were set 1, 2, 2, that is, the parent container is divided into 5 parts, which occupy the parent structure width of 1/5 (100px), 2/5 (200px), 2/5 (200px).
The above is divided by proportional number, if one or more of the sub-container set fixed width, the other child containers are not set, then set the width of the width of the calculation, the rest of the above method to calculate.

. col_3 {    background-color: #fcf;    width:50px;/* set width to 50px*/}

When there are gaps in the sub-containers, they divide the width by subtracting the middle margin and then splitting them equally.

. col_2 {    background-color: #ccf;    Box-flex:2;    -moz-box-flex:2;    -webkit-box-flex:2;    margin:0 20px;   }

Second, Box properties
The above is about how to divide the Box-flex of the parent container, and now what the box properties inside the parent container are.
Box-orient, Box-direction, Box-align, Box-pack, Box-lines
1, Box-orient
Box-orient is used to determine whether the parent container lining container is arranged horizontally or vertically, and the optional properties are as follows:
Horizontal | Vertical | Inline-axis | Block-axis | Inherit
The horizontal and Inline-axis properties are consistent in their performance, and can be arranged horizontally, and horizontally arranged by default. When the parent container sets the height, the height of its child container under Firefox is invalid, but the chroma below is valid.

. col_1 {    height:50px;   }   . col_2 {    height:80px;   }

If you do not set the height of the container, the height value of the sub-container takes effect, and the maximum value is taken from the height of Firefox. And the height of the sub-container set below chrome for its own height, not set its height and the height of the maximum value, in fact, the height of the parent container is consistent.

. box {/    * not set height */}   . col_1 {    height:50px;   }   . col_2 {    height:80px;   }   . Col_3 {/    * not set height */}

The vertical and Block-axis properties behave in a consistent, vertical arrangement of sub-containers. They are assigned the height of the parent container. If the sub-container set the width, but also Google under the effective, Firefox invalid, others are consistent with horizontal performance.

2, Box-direction
The box-direction is used to determine the order of the child containers within the parent container, with the following properties:
normal | Reverse | Inherit
Normal is the default value, such as the test results above.
Reverse is reversed and behaves in the opposite way as normal, rendering 3, 2, 1

3, Box-align
The box-align represents the vertical alignment of the face container in the parent container, and the property value is:
Start | End | Center | Baseline | Stretch
Start, Baseline display effect

End Display Effect

Center Display effect

Stretch display effect, (Google below as start)

4, Box-pack
The box-pack represents the horizontal alignment of the face container in the parent container, and the optional parameters are as follows:
Start | End | Center | Justify
CSS Code

. box {    display:box;    Display:-webkit-box;    Display:-moz-box;    Background-color: #fff;    width:500px;    border:1px solid #333;    margin:0 Auto;    height:100px;    -webkit-box-pack:start;    -moz-box-pack:start;    Box-pack:start;   }   . col_1,.col_2,.col_3{    width:100px;   }

Start: The box-pack represents the horizontal left-aligned, as follows:

End: The box-pack indicates that the horizontal is aligned to the right, as shown in

Center: The box-pack represents the horizontal center alignment, as shown in

Justify: The box-pack indicates that both sides are aligned