2020年5月css布局flex 多行四列 多行多列
标签：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
