在移動端中的flex佈局

時間 2019-11-10

標籤移動 flex 佈局欄目無線简体版

原文原文鏈接

flex佈局介紹：

　　flex佈局很靈活，這種佈局咱們也能夠稱之爲彈性佈局，彈性佈局的主要優點就是元素的寬或者高會自動補全;javascript

flex佈局實例：

　　好比有兩個div，一個div的寬度爲100px，想讓另一個div的佔據剩下的寬度：css

<!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，另一個高度自動補全當前界面下剩餘的高度：html

<!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的佈局方式更加多樣化了；java

　　flex佈局也能夠實現未知寬高的元素自動居中，之前用的比較多的居中佈局方式主要爲固定寬高的負margin居中：android

<!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的時候，該子元素會自動適應當前寬高：css3

　　若是一個父元素爲flex佈局，內部元素的寬度會根據各自的flex屬性值進行等比切分：web

<!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。低版本不支持。ide

　　安卓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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。