flex简单参考实例 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .main {
            position: absolute;
            left: 0;
            top: 0;
            background-color: aquamarine;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        .top {
            height: 60px;
            width:90%;
            background-color: red;
            text-align:center;
        }
        
        .container{
            width: 90%;
            background-color: gray;
            flex: 1; /**占据所有剩余空间**/
            text-align:center;
            display: flex;
        }
        
        .left, .right{
            width:100px;
            background-color:green;
            //flex:1;/**想要3个div均等划分就开放此设置**/
        }
        
        .center{
            flex:1;
        }

        .bottom {
            width: 90%;
            height: 60px;
            background-color: red;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="top">
            top
        </div>

        <div class="container">
          <div class="left">left</div>
          <div class="center">center</div>
          <div class="right">right</div>
        </div>

        <div class="bottom">footer</div>
    </div>
</body>
</html>

 

posted on 2019-05-23 13:35  itjeff  阅读(144)  评论(0)  编辑  收藏  举报

导航