關於CSS3 flex佈局,這樣簡單作就行了。

flex佈局在移動端會用得比較普遍,例如導航欄,菜單欄等,以支付寶,淘寶APP爲例。css

clipboard.png

看了網上不少關於flex佈局,有些寫得太亂了,也太複雜了。html

寫一個導航欄,5個導航,用普通得寫法是。

<!DOCTYPE html>
<html>
<head>
    <title>Flex佈局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <style type="text/css">
        *{margin:0px;padding: 0px;list-style: none;}
        .con{
            height: 50px;
            text-align: center;
            background: #f00;
        }

        .con li{
            width: 20%;
            border:1px solid #000;
            box-sizing: border-box;
            height: 50px;
            float: left;
            line-height: 50px;
        }
    </style>
</head>
<body>
<ul class="con">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>

clipboard.png

就沒每一個<li></li>按照20%平均分,左浮動便可。這種方法是能夠實現得,但後面再增長<li></li>,例如7個<li></li>,那麼是下面這樣的。web

clipboard.png

很明顯父級元素放不下了,只能被擠下去了。微信

那麼,用flex佈局怎麼作呢?有何優勢?

<!DOCTYPE html>
<html>
<head>
    <title>Flex佈局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <style type="text/css">
        *{margin:0px;padding: 0px;list-style: none;}
        .con{
            display: flex;
            height: 50px;
            text-align: center;
            background: #f00;
        }

        .con li{
            flex: 1;
            text-align: center;
            line-height: 50px;
            border:1px solid #000;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<ul class="con">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>

效果是和上面同樣的佈局

clipboard.png

可是當我新增7-10個,都不會被擠下去,而是直接在父級元素上面進行排列並從新劃分寬度。學習

clipboard.png

若是要加一個margin-right呢?這個也容易啊,可是最後一個<li></li>不貼邊,咱們要給最後一個<li></li>單獨加一個style。flex

<!DOCTYPE html>
<html>
<head>
    <title>Flex佈局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <style type="text/css">
        *{margin:0px;padding: 0px;list-style: none;}
        .con{
            display: flex;
            height: 50px;
            text-align: center;
        }

        .con li{
            flex: 1;
            text-align: center;
            line-height: 50px;
            border:1px solid #000;
            box-sizing: border-box;
            margin-right: 3px;
            background: #f00;
        }
    </style>
</head>
<body>
<ul class="con">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li style="margin-right: 0;">9</li>
</ul>
</body>
</html>

clipboard.png

下面再說一個不均等的。

clipboard.png

如上圖,有三個<li></li>,每一個<li></li>都是不均等的,在父級元素用普通的方法就是給不一樣的百分比。那麼用flex佈局,就是這樣:spa

<!DOCTYPE html>
<html>
<head>
    <title>Flex佈局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <style type="text/css">
        *{margin:0px;padding: 0px;list-style: none;}
        .con{
            display: flex;
            height: 50px;
            text-align: center;
        }

        .con .li_1{
            flex: 1;
            text-align: center;
            line-height: 50px;
            border:1px solid #000;
            box-sizing: border-box;
            background: #f00;
        }

        .con .li_2{
            flex: 2;
            text-align: center;
            line-height: 50px;
            border:1px solid #000;
            box-sizing: border-box;
            background: #f00;
        }

        .con .li_3{
            flex: 3;
            text-align: center;
            line-height: 50px;
            border:1px solid #000;
            box-sizing: border-box;
            background: #f00;
        }
    </style>
</head>
<body>
<ul class="con">
<li class="li_1">1</li>
<li class="li_2">2</li>
<li class="li_3">3</li>
</ul>
</body>
</html>

上面給每一個<li></li>用flex劃分,一共分6份,li_1佔1/6,那就是flex:1;li_2佔2/6,那就是flex:2;這個容易理解吧。scala

下面接着說水平排列方式:

在父級元素使用justify-content3d

justify-content:space-around;/*左右平均分佈*/
justify-content:center;/*居中*/
justify-content:space-between;/*兩端分佈*/
justify-content:flex-start;/*居左*/
justify-content:flex-end;/*居右*/

clipboard.png
clipboard.png
clipboard.png
clipboard.png

Author:TANKING
學習交流微信:face6009
web:http://likeyunba.com

相關文章
相關標籤/搜索