弹性布局是什么?弹性布局flex的基本应用(附代码)


本文摘自PHP中文网,作者不言,侵删。

弹性布局是什么?弹性布局(flex),顾名思义是一种布局方法,现如今,基本所有的浏览器都已经支持弹性布局。那么,接下来本文所给大家分享的就是弹性布局flex的基本应用。

如何应用弹性布局,代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        div{

            border: 1px solid #ccc;

            box-sizing: border-box;

        }

        .box{

            height:20vh;           

            display: flex;         

        }

        .box div{          

            flex: 1;

        }

        .box div:last-child{

            flex: 2;

        }

    </style>

</head>

<body>

    <div>

        <div>Document1</div>

        <div>Document2</div>

        <div>Document3</div>

        <div>Document4</div>

        <div>Document5</div>

    </div>   

</body>

</html>

运行结果如下:

阅读剩余部分

相关阅读 >>

css中的弹性布局是什么

html5弹性布局有什么优点

css布局之静态布局、自适应布局、流式布局、响应式布局、弹性布局

弹性布局是什么?弹性布局flex的基本应用(附代码)

详解css3实现弹性布局的方式

更多相关阅读请进入《弹性布局》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...