box-flex用法

最新推荐文章于 2021-02-05 17:24:04 发布

「已注销」

最新推荐文章于 2021-02-05 17:24:04 发布

阅读量471

点赞数

文章标签： css 弹性盒子

本文链接：https://blog.csdn.net/Good_zwn/article/details/82024645

版权

注意：使用box-flex的元素，其父元素display属性值必须是box

目前，还没有浏览器实现display:box,但是个浏览器厂商实现了带前缀的box属性:

dispaly:-mox-box;

display:-webkit-box;

html代码：

<div id="div1">
    <div id="div2">
       div2
    </div>
    <div id="div3">
       div3
    </div>
    <div id="div4">
       div4
    </div>
</div>

css代码：

div{
    border: solid black 1px;
}
#div1{
    width: 100%;
    height: 500px;
    display: -moz-box;
    display: -webkit-box;
}
#div2,#div3,#div4{
    height: 100%;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
}

效果图：

效果图