flex简单参考实例

最新推荐文章于 2022-02-14 15:29:42 发布

weixin_34101229

最新推荐文章于 2022-02-14 15:29:42 发布

阅读量81

点赞数

原文链接：http://www.cnblogs.com/itjeff/p/10911380.html

版权

<!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>

转载于:https://www.cnblogs.com/itjeff/p/10911380.html

weixin_34101229

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex简单参考实例

<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .main { position: absolute; left: 0; ...
复制链接

扫一扫