About Display:box and Box-flex

These two days do mobile phone projects, using the new properties to this CSS3. It is not supported for all browsers, so prefix is used. See below for the use of:

HTML code:

<div class= "S-indline" >
            <div class= "S-indnav s-indintro" >
                <span class= "S-icon" ></span >
                <p> Brand Introduction </p>
            </div>
            <div class= "S-indnav s-indinfo" >
                <span class= S-icon "></span>
                <p> Preferential information </p>
            </div>
        </div>
        <div class=" S-indline ">
            <div class=" S-indnav s-indshop ">
                <span class=" S-icon "></span>
                <p> Store Search </p>
            </div>
            <div class= "S-indnav s-indgoods" >
                <span class= " S-icon "></span>
                <p> Hot Products </p>
            </div>
        </div>

CSS code:

. s-indline{display:-webkit-box;
    Display:-moz-box;
    Display:box;
    margin-bottom:10px;
    -moz-box-orient:horizontal;
    -webkit-box-orient:horizontal;
Box-orient:horizontal;
    }. s-indline. s-indnav{-webkit-box-flex:5;
    -moz-box-flex:5;
    Box-flex:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    Box-sizing:border-box;
    border-radius:10px;
    Color: #ffffff;
    Text-align:center;
    height:105px;
    padding:15px 0px;
Font-size:1.5rem; }. s-indline. s-indnav:first-child{margin-right:10px; s-indintro{background: #4eb566; s-indinfo{back
Ground: #ffa422;  }. s-indshop{background: #7788f2; s-indgoods{background: #ef604d;} s-indline. S-indnav. S-icon. S-groupnav
    . s-icon{width:50px;
    height:50px;
    Display:inline-block;
    Background-repeat:no-repeat;
    background-size:100% 100%;
Background-position:center; }. S-indintro. s-icon{Background-imaGe:url ("Group.png"); }. S-indinfo. s-icon{background-image:url ("Group.png"); S-indshop s-icon{("Background-image:url")
; }. S-indgoods. s-icon{background-image:url ("Group.png");} 

You can also set margin and padding values without setting the Box-flex value for child elements, directly using width instead. The results are shown below:

The code above is fine when you debug on a chrome or other-webkit-core browser, but there are problems under Firefox, as shown in the following illustration:

The local solution must be to add a width style to the parent element, such as width:100%; Can.

In addition, there is a problem in Firefox, which says that you can give child elements do not set Box-flex, but set the width, but in Firefox can not recognize the width, but must set Box-flex.