关于CSS3 flex布局,这样简单做就好了。

52

flex布局在移动端会用得比较广泛,例如导航栏,菜单栏等,以支付宝,淘宝APP为例。

clipboard.png

看了网上很多关于flex布局,有些写得太乱了,也太复杂了。

写一个导航栏,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>,那么是下面这样的。

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。

<!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布局,就是这样:

<!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;这个容易理解吧。

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

在父级元素使用justify-content

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

你可能感兴趣的

冰__翼 · 2018年12月19日

纠正一个不严谨的错误: justify-content 的作用不是水平排列方式,而是平行于主轴方向上的排列方式。通过 flex-direction 可以设置主轴方向是水平还是垂直。默认情况下是水平排列,所以 justify-content 对应水平方向上的排列方式;如果 flex-direction 是垂直,那么 justify-content 就是对应垂直方向上的对齐方式。

+2 回复

jeanChueng · 2018年12月19日

每个li设置margin值,最后一个贴边,可以用:

li + li {
  margin-left: 3px
}

这样就不用单独设置最后一个li的margin值了

+1 回复

0

这样做单行不错,但多行就不是想要的效果,其它行的第一个也会包含左边距

掌门人木牙子 · 2018年12月26日
1

@掌门人木牙子 多行可以设置

li{
  margin-right: 3px;
}
.con{
  margin-right:-3px;
}

即可抵消最后一个li的右边距,总感觉在li上单独加样式不是很好的解决办法,纯个人见解。

jeanChueng · 2018年12月27日
hong10 · 2018年12月13日

移动端flex偏多些吧 PC 一般可以用media查询就够了吧

回复

0

flex 和媒体查询的作用完全不是一码事,不要搞混了

冰__翼 · 2018年12月19日
SenHan · 2018年12月14日

pc端固定值更多一些 移动端各种适配比较适合flex+百分比/rem制作.加上淘宝的flexible.js移动端效果还是很棒的,pc端的话用不用框架,用什么框架差距都不大.

回复

0

pc用flex也会变得高效简单 比如bootstrap4

小康 · 1月7日
载入中...