移动端flex弹性盒子布局

今天在做项目的时候遇到一个关于flex布局的问题

1.如何使用flex的各种属性

 ul {
            width: 100%;
            height: 500px;
            background: beige;
            display: flex;
            flex-wrap: wrap; /*自动换行*/
            justify-content: space-between;/*贴到两边*/
            justify-content: space-around;/*贴到两边但是有空隙*/
            box-sizing: border-box;/*怪异盒模型*/
        }

        li {
            list-style: none;
            width: 30%;
            height: 50px;
            background: blueviolet;
            display: flex;
            justify-content: center;/*直接居中*/
            align-items: center;/*垂直居中*/
        }

按照上面的各种单词属性就可以完成一些简单的布局了