范仁义css3课程---44、弹性盒子（flex）实例
一、总结
一句话总结：
弹性盒子小实例中主要是给弹性盒子容器设置了display: flex;和justify-content: space-around;属性。弹性盒子可以用来做响应式布局，弹性盒子对不同设备不同屏幕尺寸有很好的适应性。
二、弹性盒子（flex）实例
博客对应课程的视频位置：44、弹性盒子（flex）实例
https://www.fanrenyi.com/video/10/103
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>弹性盒子（flex）实例</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <style> 8 .icon_nav{ 9 max-width: 960px; 10 margin: 30px auto; 11 } 12 .flex_box{ 13 display: flex; 14 justify-content: space-around; 15 } 16 .flex_box .item .item_a{ 17 display: inline-block; 18 width: 61px; 19 height: 68px; 20 text-align: center; 21 text-decoration: none; 22 } 23 .flex_box .item .item_a img{ 24 width: 61px; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="icon_nav"> 30 <div class="flex_box"> 31 <div class="item"> 32 <a class="item_a" href=""> 33 <img src="../imgs/taobao1.png" alt=""> 34 <span>天狗</span> 35 </a> 36 </div> 37 <div class="item"> 38 <a class="item_a" href=""> 39 <img src="../imgs/taobao2.png" alt=""> 40 <span>天狗聚</span> 41 </a> 42 </div> 43 <div class="item"> 44 <a class="item_a" href=""> 45 <img src="../imgs/taobao2.png" alt=""> 46 <span>天狗聚</span> 47 </a> 48 </div> 49 <div class="item"> 50 <a class="item_a" href=""> 51 <img src="../imgs/taobao2.png" alt=""> 52 <span>天狗聚</span> 53 </a> 54 </div> 55 <div class="item"> 56 <a class="item_a" href=""> 57 <img src="../imgs/taobao2.png" alt=""> 58 <span>天狗聚</span> 59 </a> 60 </div> 61 </div> 62 <div class="flex_box"> 63 <div class="item"> 64 <a class="item_a" href=""> 65 <img src="../imgs/taobao1.png" alt=""> 66 <span>天狗</span> 67 </a> 68 </div> 69 <div class="item"> 70 <a class="item_a" href=""> 71 <img src="../imgs/taobao2.png" alt=""> 72 <span>天狗聚</span> 73 </a> 74 </div> 75 <div class="item"> 76 <a class="item_a" href=""> 77 <img src="../imgs/taobao2.png" alt=""> 78 <span>天狗聚</span> 79 </a> 80 </div> 81 <div class="item"> 82 <a class="item_a" href=""> 83 <img src="../imgs/taobao2.png" alt=""> 84 <span>天狗聚</span> 85 </a> 86 </div> 87 <div class="item"> 88 <a class="item_a" href=""> 89 <img src="../imgs/taobao2.png" alt=""> 90 <span>天狗聚</span> 91 </a> 92 </div> 93 </div> 94 </div> 95 </body> 96 </html>