The Box-flex of CSS3 elastic box model

CSS3 Elastic Box Model Box-flex browser support

There is currently no browser support for the Box-flex property.

Firefox supports an alternative-moz-box-flex property.

Safari, Opera, and Chrome support alternative-webkit-box-flex genera

Box-flex is a newly added box model attribute of 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.

<div class= "box" ><div class= "Col_1" >111</div><div class= "col_2" >222</div><div class= "Col_3" >333</div></div><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>

　Note : 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 to calculate, the rest of the method is calculated as above.

. 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, the Box property of the Box property includes:

Box-orient, Box-direction, Box-align, Box-pack, Box-lines

The specific usage of the property value can refer to the document

The Box-flex of CSS3 elastic box model