zoukankan      html  css  js  c++  java

  • 布局：flex弹性布局_实践02

    <!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-fiexed{
    flex:0 0 280px;
}

.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;
}    */

    <!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">
    <aside class="cus-cell cell-fiexed">
    </aside>
    <article class="cus-cell ">
    </article>
</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-fiexed{
    flex:0 0 280px;
}

    <!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">
    <aside class="cus-cell cell-4">
    </aside>
    <article class="cus-cell ">
    </article>
</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-4{
    flex:0 0 25%;
}

    <!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">
    <aside class="cus-cell cell-4 column">
        <div class="cus-cell"></div>
        <div class="cus-cell" ></div>
    </aside>
    <article class="cus-cell ">
    </article>
    <aside class="cus-cell cell-4 column">
        <div class="cus-cell"></div>
        <div class="cus-cell" ></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-fiexed{
    flex:0 0 280px;
}

.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;
}    */

    <!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">
    <aside class="cus-cell cell-2-5">
        <div class="cus-cell">1</div>
        <div class="cus-cell" >2</div>
    </aside>

    <article class="cus-cell ">
    </article>

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

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

.cus-cell{
    display:-webkit-flex;
    display:flex;

    flex:1 1 0%;
    border:1px solid red;
}

.cell-2-5{
    flex:0 0 40%;
}

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

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

    flex-direction:column;    
}
/*.column>div{
    flex: 1 1 auto;
}    */
  • 相关阅读:
    接口和抽象的区别
    接口
    jquery Ajax提交表单数据
    SQL 检查 是否存在 表 临时表
    ASP.NET MVC 设置Area中 Controller 的方法 默认启动页
    json 序列化为数组
    C# Lamda中类似于SQL 中的 In 功能
    各种webservice调用地址
    ASP.NET获取客户端IP地址
    C#反射机制 Type类型
  • 原文地址：https://www.cnblogs.com/jiunie/p/11343900.html
Copyright © 2011-2022 走看看