<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹性盒子（flex）实例</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style> .icon_nav{ max-width: 960px; margin: 30px auto; } .flex_box{ display: flex; justify-content: space-around; } .flex_box .item .item_a{ display: inline-block; width: 61px; height: 68px; text-align: center; text-decoration: none; } .flex_box .item .item_a img{ width: 61px; } </style> </head> <body> <div class="icon_nav"> <div class="flex_box"> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习i1.jpg" alt=""> <span>天狗</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习i1.jpg" alt=""> <span>天狗聚</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习i1.jpg" alt=""> <span>天狗聚</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习i1.jpg" alt=""> <span>天狗聚</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习i1.jpg" alt=""> <span>天狗聚</span> </a> </div> </div> <div class="flex_box"> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习i1.jpg" alt=""> <span>天狗</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习i2.jpg" alt=""> <span>天狗聚</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习i2.jpg" alt=""> <span>天狗聚</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习i2.jpg" alt=""> <span>天狗聚</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习i2.jpg" alt=""> <span>天狗聚</span> </a> </div> </div> </div> </body> </html>