弹性布局怎样排两行

    技术2022-07-13  82

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .row { width: 300px; display: flex; flex-wrap: wrap; align-content: center; } .col{ flex: 0 25%; //根据实际情况而定 height: 80px; box-sizing: border-box; border: 1px solid #dcdfe6; } </style> </head> <body> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> </div> </body> </html>

     

    Processed: 0.017, SQL: 9