一个Flexbox布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <base target="_blank" /> <title>三十客 - 一个Flexbox布局</title> <style> .box { display: flex; flex-wrap: wrap; border: 1px solid #000; box-sizing: border-box; justify-content: center; width:100%; } .cell { margin:2em; } .content { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; margin: 20px auto; font-size: 32px; font-weight: bold; background-color: rgb(37, 180, 144); } </style> </head> <body> <div class="box"> <div class="cell"> <div class="content">A</div> </div> <div class="cell"> <div class="content">B</div> </div> <div class="cell"> <div class="content">C</div> </div> <div class="cell"> <div class="content">D</div> </div> <div class="cell"> <div class="content">E</div> </div> <div class="cell"> <div class="content">F</div> </div> <div class="cell"> <div class="content">G</div> </div> <div class="cell"> <div class="content">H</div> </div> <div class="cell"> <div class="content">I</div> </div> <div class="cell"> <div class="content">J</div> </div> <div class="cell"> <div class="content">K</div> </div> <div class="cell"> <div class="content">L</div> </div> </div> </body> </html>