在移动端中的flex布局

Posted 方方和圆圆

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在移动端中的flex布局相关的知识，希望对你有一定的参考价值。

flex布局介绍：

　　flex布局很灵活， 这种布局我们也可以称之为弹性布局，  弹性布局的主要优势就是元素的宽或者高会自动补全;

flex布局实例：

　　比如有两个div，一个div的宽度为100px， 想让另外一个div的占据剩下的宽度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin:0;

        }
        .box{
            display:flex;
            flex-direction:row;
        }
        .box .child{
            width:40px;
            background:#f00;
        }
        .box .child1{
            flex:1;
            background:#0f0
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">child</div>
        <div class="child1">child1</div>
    </div>
</body>
</html>
View Code

　　或者有两个div，一个高度为100px， 另外一个高度自动补全当前界面下剩余的高度：

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body,.box{
            height:100%;
        }
        body{
            margin:0;

        }
        .box{
            display:flex;
            flex-direction:column;
        }
        .box .child{
            height:40px;
            background:#f00;
        }
        .box .child1{
            flex:1;
            background:#0f0
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">child</div>
        <div class="child1">child1</div>
    </div>
</body>
</html>
View Code

　　所以说flex布局是很灵活， flex布局没出现之前，这种布局不好实现， 只能通过-webkit-calc的方式， 或者使用javascript的方式动态修改元素的样式，还有水平方向元素自动适应布局等， 用了flex，css的布局方式更加多样化了；

　　flex布局也可以实现未知宽高的元素自动居中， 以前用的比较多的居中布局方式主要为固定宽高的负margin居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body,.parent{
            height:100%;
        }
        .parent{
            justify-content:center;/*水平居中*/
            align-items: center; /*垂直居中*/
            display:-webkit-flex;
/*
            flex-direction：排版方向
            flex-wrap：如果宽度超出父级宽度， 是否折行
            flex-flow：flex－direction和flex－wrap的缩写
*/        }
        .child{
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
            hehe
        </div>
    </div>
</body>
</html>
View Code

　　子元素css的样式flex：auto或者flex：1的时候， 该子元素会自动适应当前宽高：

　　如果一个父元素为flex布局， 内部元素的宽度会根据各自的flex属性值进行等比切分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
    <style>
        .box{
            display:flex;
            flex-direction:row
        }
        .box .child{
            flex:1;
        }
        .box .chi{
            flex:3;
        }
    </style>
    <div class="box">
        <div class="child">
            child
        </div>
        <div class="chi">
            chi， child占用1/4的百分比， chi占用3/4的百分比
        </div>
    </div>
    <br>
    <br>
    <style>
        .box1{
            display:flex;
            flex-direction:row;
        }
        .box1 .child{
            width:40px;
        }
        .box1 .chi{
            flex:1;
        }
    </style>
    <div class="box1">
        <div class="child">
            child
        </div>
        <div class="chi">
            chi， child固定长度， chi自动适应
        </div>
    </div>
    <br>
    <br>
    <style>
        .box2 {
            display:flex;
            flex-direction:row;
        }
        .box2 .child1{
            width:40px;
        }
        .box2 .child2{
            flex:auto;
        }
        .box2 .child3{
            width:40px;    
        }
    </style>
    <div class="box2">
        <div class="child1">child1</div>
        <div class="child2">child2, 两边固定宽度， 中间自动适应</div>
        <div class="child3">child3</div>
    </div>
</body>
</html>
View Code

　　高度自动适应的demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;    
        }
        html,body,.box{
            height:100%;
        }
        .box{
            display:flex;
            flex-direction:column;
        }
        .box .header{
            height:40px;
            background:#f00;
        }
        .box .bodyer{
            flex:1;
            background:#0f0;
        }
        .box .footer{
            height:40px;
            background:#00f;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="header">header</div>
        <div class="bodyer">bodyer</div>
        <div class="footer">footer</div>
    </div>
</body>
</html>
View Code

　　通过flex布局可以模拟一个微信的聊天窗口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body,.box{
            height:100%;
        }
        .box{
            display:-webkit-flex;
            display:flex;
            flex-direction:column;
            font-family:"microsoft yahei";
            font-size:18px;
        }
        .box .header{
            height:40px;
            line-height:40px;
            text-align:center;
            background:#3498DB;
            color:#fff;
        }
        .box .body{
            display: block;
            border-bottom:1px solid #eee;
            overflow:auto;
            flex:1;
        }
        .box .send-left {
            align-self:flex-end;
            margin-top:10px;
            position:relative;
            height:35px;
            background:#F8C301;
            border-radius:5px; /* 圆角 */
            line-height:35px;
            margin-left:10px;
            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:#2ECC71;
            border-radius:5px; /* 圆角 */
            line-height:35px;
            margin-right:10px;
            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 #2ECC71;
        }
        .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">
                hehe我哟我去
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                hehe
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                hehe我哟我去
                <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>
        <div class="footer">
            <input type="text">
            <button>发送</button>
        </div>
    </div>    
</body>
<script>
    
</script>
</html>
View Code

flex布局的其它css属性：

　　Flex 容器属性：

　　Flex 条目属性：

 

兼容：

　　android 4.4以上版本支持display:flex。低版本不支持。

　　安卓4.1，以及4.1以下不支持flex布局， 必须考虑别的方案；

　　android的低版本无法使用display:flex， 但是可以使用display:box替代；

　　要记得加浏览器前缀， 兼容写法如下：

  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

　　 

 参考：

　　caniuse：http://caniuse.com/#feat=flexbox

　　MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

　　MDN参考资料：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox

　　ruanyifeng：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

 

以上是关于在移动端中的flex布局的主要内容，如果未能解决你的问题，请参考以下文章

flex弹性布局

浅谈移动端中的视口（viewport）

移动和PC端中的hover处理

Flex布局详解

移动端布局（如何解决边框问题）

02 移动布局之flex