详解css3 flex弹性盒自动铺满写法

(编辑：jimmy 日期: 2024/11/2 浏览：3 次 )

本文主要介绍了详解css3 flex弹性盒自动铺满写法，分享给大家，具体如下：

<style type="text/css">
    .flexcontainer{
        width:100%;
        height: 100%;
        position: absolute;
        left:0px;
        top:0px;
        display: flex;
        flex-direction: column;
    }
    .flex1 {
        width: 100%;
        height: 8rem;
        float: left;
        background: #f00;
    
    }
    .flex2 {
        width: 100%;
        height: 4rem;
        flex:1;
        float: left;
        background: #000;
    }
   .flex3 {
        width: 100%;
        height: 7rem;
        float: left;
        background: #ccc;
    }    
</style>
<div class="flexcontainer">
    <div class="flex1"></div>
    <div class="flex2"></div>
    <div class="flex3"></div>
</div>

上一篇：CSS3 实现雷达扫描图的示例代码
下一篇：让我来教你使用css中的字体图标的方法