flex 网页布局

       阅读(535)  2017-02-17 15:25:22

用过Qt的QHBoxLayout,QVBoxLayout再看flex布局有很多相似之处,特别要注意的是flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,后面两个是可以省略的。当一个容器没有显示出来时要注意它应该设置宽高或者flex值是不是大于0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            display: flex;
            flex-direction: row;
            background-color: rgb(255, 255, 255);
            justify-content: center;
        }
        .main {
            display: flex;
            flex-direction: column;
            background-color: rgb(15, 15, 16);
            width: 760px;
            height: 600px;
            border: 1px solid rgb(14, 148, 150);
            -webkit-border-radius: 5px 5px 0px 0px;
            border-radius:5px 5px 0px 0px;
        }
        .title {
            display: inline-flex;
            height: 40px;
            background-color: rgb(14, 148, 150);
            color: rgb(255, 255, 255);
            align-items: center;
            padding-left: 20px;
        }
        .content {
            display: flex;
            flex-direction: row;
            flex: 1;
        }
        .left {
            border-right: 1px solid rgb(60, 60, 65);
            background-color: rgb(20, 20, 21);
            width: 200px;
        }
        .left .search {
            display: flex;
        }
        .left .searchInput {
            flex: 1;
            height: 38px;
            background-color: rgb(15, 15, 16);
            font-size: 14px;
            border: none;
            border-bottom: 1px solid rgb(46, 46, 51);
            color: rgb(255, 255, 255);
            padding-left: 5px;
            padding-right: 5px;
        }

        .right {
            display: flex;
            flex: 1;
            flex-direction: column;
        }
        .right .profile {
            flex: 1;
            background-color: rgb(30, 30, 33);
            border-bottom: 1px solid rgb(69, 69, 75);
        }
        .right .chat {
            flex: 7;
            background-color: rgb(20, 20, 21);
        }
        .right .input {
            flex: 2;
            background-color: rgb(15, 15, 16);
            border-top: 1px solid rgb(50, 52, 56);
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="title">
            Flex Layout Test
        </div>
        <div class="content">
            <div class="left">
                <div class="search">
                    <input class="searchInput" type="text">
                </div>
                <div class="list">
                </div>
            </div>
            <div class="right">
                <div class="profile">
                </div>
                <div class="chat">
                </div>
                <div class="input">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

效果图 flex布局效果图

文章评论

Keep it simple,stupid
文章数
284
总访问量
263319
今日访问
232
最近评论

ningto : 请到next.ningto.com里发表评论。
tujiaw : 抱歉csdn code服务关闭了,这个代码我也找不到了
于淞 : 你好,这个文章的源码能分享一下吗,songsong9181@163.com,谢谢了 上面的写错了
于淞 : 你好,这个文章的源码能分享一下吗,838106303@163.com,谢谢了 上面的链接不能用了
tujiaw : 多谢多谢
essaypinglun college-paper.org : 很好的博客,赞赞
Folly : 这个实现有点奇怪,Qt为什么没有统一的比对方法。
过多s : alert("hello, world!")
tujiaw : 还不错哦
回到顶部