问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
justPassBy
    5731595113

    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;
}
    javascriptcsshtml
    阅读 3.1k
    1 个回答
    得票最新
    头像
    拾指相扣
      3.3k2417

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

      但是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;写法就没这个效果了

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题