2020年5月css布局flex 多行四列 多行多列

 1 DOCTYPE html>
 2 html lang="en">
 3 head>
 4   meta charset="UTF-8">
 5   meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   title>Flextitle>
 7 head>
 8 body>
 9   p>小方块20*15p> 
10   p>间距都是10p> 
11   style>
12     *{margin:0;padding:0;list-style: none;font-size: 12px;}
13   style>
14   style>
15     .parent{
16       justify-content: space-evenly;
17       box-sizing: border-box;
18       width:130px;/* 5个空隙*10+4个方块*20 */
19       display: flex;
20       flex-wrap: wrap;/*换行*/
21       padding-left:10px;
22       padding-top:10px;
23       background: green;
24     }
25     .child{
26       box-sizing: border-box;
27       width:20px;
28       height:15px;
29       border:1px solid;
30       flex:none;/*不放大不缩小*/
31       margin-right: 10px;
32       margin-bottom: 10px;
33     }
34   style>
35   ul class="parent">
36     li class="child">1li>
37     li class="child">2li>
38     li class="child">3li>
39     li class="child">4li>
40     li class="child">5li>
41     li class="child">6li>
42     li class="child">7li>
43     li class="child">8li>
44     li class="child">9li>
45     li class="child">10li>
46     li class="child">11li>
47     li class="child">12li>
48     li class="child">13li>
49   ul>
50 body>
51 html>