-webkit-box-flex 属性怎么平分?

爱喝水的小熊 发布于 2018/07/12 09:19
阅读 839
收藏 0

我写了一段代码,想看下-webkit-box-flex属性的用法,代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin-left:100px;
                margin-top:100px;
            }
            .main{
                width:200px;
                display: -webkit-box;
                /*-webkit-box-orient: horizontal;*/
            }
            .child{
                margin:10px;
                border:1px solid #ccc;
                min-height:200px;
            }
            .width20{
                width:20px;
            }
            .flex1{
                -webkit-box-flex:1;
            }
            .flex2{
                -webkit-box-flex:2;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="child width20">20px</div>
            <div class="child flex1">比例1</div>
            <div class="child flex2">比例2</div>
        </div>
    </body>
</html>

结果图下:

由图清晰地看到第二块与第三块并没有按照1:2的比例显示宽度,为什么?

加载中
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部