display : box; 不平分父元素的宽度。

display : box ;当孩子元素里面的内容不一样多时就不会平分父元素的宽度。
而display : flex; 就可以。
下面是HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <script  src="js/main.js"></script>
    </head>
    <body>
        <div id="box1">
            <div class="bo1">heh111e</div>
            <div class="bo1">hehe</div>
            <div class="bo1">hehe</div>
            <div class="bo1">hehe</div>
        </div>
        <div id="box2">
            <div class="bo2">i</div>
            <div class="bo2">lala</div>
            <div class="bo2">lala</div>
            <div class="bo2">lala</div>
        </div>
    </body>
</html>

下面是CSS代码

@charset "utf-8";
*{
    margin : 0px;
    padding : 0px;
}

html, body{
    width : 100%;
    height : 100%;
}


#box1{
    width: 100%;
    height : 100px;
    background : #f56;
    display:flex;
}
.bo1{
    flex : 1;
    border : 1px solid black;
    text-align:center;
}
#box2{
    width:100%;
    height : 100px;
    background : #ccc;
    display: -webkit-box;
}
.bo2{
    -webkit-box-flex : 1;
    border : 1px solid black;
}

无论新语法还是旧语法，两者都是设置或检索伸缩盒对象的子元素如何分配其剩余空间。

但是flex是<' flex-grow '> <' flex-shrink '> 和 <' flex-basis '>的缩写
如果缩写「flex: 1」, 则其计算值为「1 1 0%」

关于<' flex-basis '>
用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <' width '> 设置，如果自身的宽度没有定义，则长度取决于内容。

所以flex: 1的写法隐含的定义了各个子项的默认宽度是一样的
而-webkit-box-flex : 1;写法就没这个效果了

【热门文章】