html:
    （1）使用ul和li来装载元素

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <!-- <link rel="stylesheet" href="../css/reset.css"> -->
    9.     <link rel="stylesheet" href="../css/131弹性盒简介.css">
    10. </head>
    11. <body>
    12.     <ul>
    13.         <li>1</li>
    14.         <li>2</li>
    15.         <li>3</li>
    16.     </ul>
    17. </body>
    18. </html>

    css:
    （1）display: flex；应该写在父元素中，同时flex-direction: ；也应该写在父元素中
    （2）flex的作用是，可以设置浮动布局，且不用担心高度塌陷问题
    （3）采用flex-grow的作用是设置单个元素的宽度，一般写在子元素中，用数字来表示，默认为1
    （4）采用flex-shrink:;来缩小单个元素的宽度，用数字来代替，默认为0；
    （5）flex(弹性盒、伸缩盒)
    是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
    flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
    弹性容器
    要使用弹性盒，必须先将-个元素设置为弹性容器
    我们通过display 来设置弹性容器
    I
    display:flex设 置为块级弹性容器
    display:inline-flex设置为行内的弹性容器
    弹性元素
    弹性容器的子元素是弹性元素(弹性项)
    弹性元素可以同时是弹性容器