微信扫一扫打赏支持

范仁义css3课程---44、弹性盒子（flex）实例

范仁义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>

 

 

 

 

 

 

 

 

 
posted @ 2020-02-23 17:37  范仁义  阅读(230)  评论(0)    收藏  举报