flex模拟微信布局 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
            *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
        html{
            font-size:62.5%;
            -webkit-text-size-adjust:100%;
            -ms-text-size-adjust:100%;
            -ms-touch-action:manipulation;
            touch-action:manipulation;
        }
        html *{
            margin:0;padding:0;outline:0;
            -webkit-tap-highlight-color:rgba(0,0,0,0);
            -webkit-text-size-adjust:none;
        }
        title{
            width:100%;text-align:center;display:block;
        }
        html,body{
            -webkit-user-select:none;-ms-user-select:none;user-select:none;
            height:100%;
            font-family:"Helvetica Neue",Helvetical,STHeiTi,sans-serif;
        }
        body{
            font-size:1.4rem;
            -webkit-overflow-scrolling:touch;
        }
        body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
        address,article,aside,details,figcaption,figure,footer,header,menu,nav,section,summary,img{display:block;}
        audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}
        a,img{
            -webkit-touch-callout:none;
        }
        input,img{border:none;vertical-align:middle;}
        a{
            outline:0;cursor:pointer;text-decoration:none;
            -webkit-tap-highlight-color:transparent;
        }
        a:link,a:active,a:visited{text-decoration:none;}
        table{border-collapse:collapse;border-spacing:0;}
        td,th{padding:0;}
        textarea{overflow:auto;reaize:vertical;}
        input,select,textarea,button{outline:none;border:none;background:none;}
        button,input,textarea{
            -webkit-user-select:text;-ms-user-select:text;user-select:text;
            -webkit-appearance:none;
        }
        button,select{
            text-transform:none;
        }
        button,html input[type="button"],input[type="reset"],input[type="submit"]{
            cursor:pointer;
        }
        hr{
            -moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;
            height:0;
        }
        /*字体*/
        h1{font-size:1.8rem;}
        h2{font-size:1.6rem;}
        h3{font-size:1.4rem;}
        h1,h2,h3,h4,h5,h6,small{font-style:normal;font-weight:normal;}
        li,ol{list-style:none;}
        b,strong{font-weight:bold;}
        em,i{font-style:normal;}
        button,input,select,textarea{font-family:"Helvetica Neue",Helvetical,STHeiTi,sans-serif;}
        /*颜色*/
        input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc;}
        input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc;}
        input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc;}
        /*2、简化样式*/
/*        .clear{
            clear:both; 
        　　height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;
        }*/
        .fl{float:left;}
        .fr{float:right;}
        body{ margin:0 auto;max-width:640px; min-width:320px;color:#555; /*padding-bottom:8%;*/background:#fef9f1;}
        /*input,textarea{font-size:1rem;height:1rem;padding:2rem 0;}*//*input是in注意这里不能给line-height，否则上下就无法对其,height等于文字大小，
        是为了光标与文字对其，光标高度一般与font-size有关。*/


html,body,.box{
            height:100%;
        }
        .box{
            display:-webkit-flex;
            -webkit-flex-direction:column;/*垂直布局*/

            display:flex;
            flex-direction:column;

            font-family:"microsoft yahei";
            font-size:18px;
            width:100%;
        }
        .box .header{
            height:40px;
            line-height:40px;
            text-align:center;
            background:#3498DB;
            color:#fff;
        }
        .box .body{
            width:100%;
            display: block;
            border-bottom:1px solid #eee;
            overflow:auto;/*内部出现滚动条*/
            flex:1;/*随着内容增减，变化高度*/
            padding-bottom:10px;
        }
        .box .send-left {
            align-self:flex-end;
            margin-top:10px;
            position:relative;
/*            height:35px;*/
            background:#F8C301;
            border-radius:5px; /* 圆角 */
            line-height:28px;
            margin-right:16px;
            margin-left:16px;
            padding:0 10px;
            float:left;
        }
        .box .send-left .arrow {
            position:absolute;
            top:5px;
            left:-15px;
            width:0;
            height:0;
            font-size:0;
            border:solid 8px;
            border-color:#fff #F8C301 #fff #fff;
        }
        .box .send {
            align-self:flex-end;
            margin-top:10px;
            position:relative;
         /*   height:35px;*/
            background:#9dd4f2;
            border-radius:5px; /* 圆角 */
            line-height:28px;
            margin-right:16px;
            margin-left:16px;
            padding:0 10px;
            float:right;
        }
        .box .send .arrow {
            position:absolute;
            top:5px;
            right:-15px;
            width:0;
            height:0;
            font-size:0;
            border:solid 8px;
            border-color:#fff #fff #fff #9dd4f2;
        }
        .box  .clear{
            clear:both;
        }
        .box .footer{
            height:40px;
            line-height:40px;
            display:-webkit-flex;
            display:flex;
        }
        .box .footer input{
            flex:auto;
            border:none;
            border-right:1px solid #eee;
            font-size:18px;
            padding-left:4px;
        }
        .box .footer button{
            width:50px;
            font-size:18px;
        }
    </style>
</head>
<body>
    <!--
    容器属性
        flex-direction
        flex-wrap
        flex-flow
        justify-content
        align-items
        align-content
    项目属性：
        order
        flex-grow
        flex-shrink
        flex-basis
        flex
        align-self
    -->
    <div class="box">
        <div class="header">
            消息
        </div>
        <div class="body">
            <div class="send-left">
                你好！
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                   nihao
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send-left">
                周末去玩不
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                好呀
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                去哪儿
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                太远的地方就算了，明天还要上班，晚上准备好好吃一顿，现在秋天了，还得准备长秋膘了，冬天就不冷了，明天就要上班了，就没有时间做好吃的了。
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send-left">
                哎呀呀，真麻烦，那就去河坊街吧！
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                不想去。。。
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send-left">
                那就去西湖，西溪湿地，动物园，嗯，还有北高峰，这些可都没有出省的啊，算是比较近的了，要是人少的话，估计那些地方就一般了，再不然就是到附近的影院看看电影了。
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                👌就这么定了。
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                然后，抽风中
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="footer">
            <input type="text">
            <button>发送</button>
        </div>
    </div>    
</body>
<script>
    
</script>
</html>

 

帮助理解：

　　最外层：

.box{
            display:-webkit-flex;
            -webkit-flex-direction:column;/*垂直布局*/

            display:flex;
            flex-direction:column;
    
            width:100%;
            height:100%;
        
        }

其中包括header，body，footer;

.box .header{height:40px;}

.box .body{
            width:100%;
            display: block;
            overflow:auto;/*内部出现滚动条*/
            flex:1;/*随着内容增减，变化高度*/
        }
.box .footer{
            height:40px;
            line-height:40px;

            display:-webkit-flex;
            display:flex;
        }

 

posted @ 2016-11-01 16:49  最爱小虾  阅读(507)  评论(0)  编辑  收藏  举报