标签：init   布局   one   parent   border   ini   col   html   pac   

 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>Flex</title>
 7 </head>
 8 <body>
 9   <p>小方块20*15</p> 
10   <p>间距都是10</p> 
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">1</li>
37     <li class="child">2</li>
38     <li class="child">3</li>
39     <li class="child">4</li>
40     <li class="child">5</li>
41     <li class="child">6</li>
42     <li class="child">7</li>
43     <li class="child">8</li>
44     <li class="child">9</li>
45     <li class="child">10</li>
46     <li class="child">11</li>
47     <li class="child">12</li>
48     <li class="child">13</li>
49   </ul>
50 </body>
51 </html>

技术图片

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

标签：init   布局   one   parent   border   ini   col   html   pac   

原文地址：https://www.cnblogs.com/JokerAn/p/12867987.html

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。