The Box-flex of CSS3 elastic box model

It's useful for page layouts for the Box-sizing property you've previously talked about, but suddenly it's still a problem, and there's no problem in the previous example, it doesn't mean it's not a problem. If the number of elements is divisible by 100%, compare 3 elements, then the width of the first box will be 33.3333333%, it is clear that, in any case, it is impossible to divide evenly. This is obviously not perfect! Is there a more perfect solution, the answer is--yes, it's box-flex.

Box-flex is the new box model attribute CSS3, which breaks the floating layout we often use to achieve vertical, horizontal, and proportional partitioning. It distributes the elements horizontally and does not require a floating float property to achieve horizontal layout.

Look at the code first:

.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 ; }To use Box-flex, the parent container must be defined as Display:box, and the browser must have its own private prefix, since there is currently no browser support for the Box-flex property.      The container stator display:box the container as an inline element. In the example above, the parent container is divided into 5 parts, and three child elements are 1,2,2, that is, the value of Box-flex is the equal portion of it. So, Col_1 for 500px* (1/5) =100px,col_2 and Col_3 are 500px* (2/5) =200px. What if one of the elements sets a fixed width value?      such as: col_3{width:50px}, then set the fixed width of the value of the element is a fixed value, the other sub-elements will be the rest of the way to allocate the above, when the child elements have interval, they split the width of the need to subtract their margin value, and then by comparison allocation. Do not need to calculate the percentage, set the score will be able to perfectly show what you want!! Box-flex is definitely what you want!!

The Box-flex of CSS3 elastic box model