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>
