布局:flex弹性布局_实践02

邮差的信 提交于 2019-11-27 04:44:40

<!doctype html> <html> 
<head>
    <meta charset="utf-8" />
    <title>H5标准页面</title>
    <link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" />

</head>
<body class="site">
    <article class="cus-cell">
    </article>
    <aside class="cus-cell cell-4 column">
        <div class="cus-cell">
        </div>
        <div class="cus-cell cell-3">
        </div>
    </aside>
</body>
</html>
.site{
    margin:0;
    padding:0;

    display:-webkit-flex;
    display:flex;
    min-height:100vh;
}

.cus-cell{
    flex:1 1 0%;
    border:1px solid red;
}


.cell-Full{
    flex:0 0 100%;
}

.cell-2{
    flex:0 0 50%;
}

.cell-3{
    flex:0 0 33.3333%;
}

.cell-4{
    flex:0 0 25%;
}

.column{
    display:-webkit-flex;
    display:flex;

    flex-direction:column;    
}
/*.column>div{
    flex: 1 1 auto;
}    */

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!