尚硅谷css3---flex布局实例（多列布局）
一、总结
一句话总结：
弹性盒子的操作比较简单，在弹性盒子上指定display: flex，在item上面指定flex综合属性的值为1。
#nav > .row{ display: flex; } #nav > .row > .item{ flex: 1; text-align: center; }
1、图标的另外一种生成方式（用伪元素）？
可以用伪元素:before弄一个block块，然后指定宽高，且居中
1 #nav > .row > .item > a:before{ 2 content: ""; 3 display: block; 4 width: 86px; 5 height: 86px; 6 margin: 0 auto; 7 } 8 9 #nav > .row:nth-child(1) > .item:nth-child(1) >a:before{ 10 background: url(img/01.png) no-repeat; 11 }
二、flex布局实例（多列布局）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 a{ 12 text-decoration: none; 13 color: gray; 14 display: block; 15 } 16 #nav > .row{ 17 display: flex; 18 } 19 #nav > .row > .item{ 20 flex: 1; 21 text-align: center; 22 } 23 24 #nav > .row > .item > a:before{ 25 content: ""; 26 display: block; 27 width: 86px; 28 height: 86px; 29 margin: 0 auto; 30 } 31 32 #nav > .row:nth-child(1) > .item:nth-child(1) >a:before{ 33 background: url(img/01.png) no-repeat; 34 } 35 #nav > .row:nth-child(1) > .item:nth-child(2) >a:before{ 36 background: url(img/02.png) no-repeat; 37 } 38 #nav > .row:nth-child(1) > .item:nth-child(3) >a:before{ 39 background: url(img/03.png) no-repeat; 40 } 41 #nav > .row:nth-child(1) > .item:nth-child(4) >a:before{ 42 background: url(img/04.png) no-repeat; 43 } 44 #nav > .row:nth-child(1) > .item:nth-child(5) >a:before{ 45 background: url(img/05.png) no-repeat; 46 } 47 48 49 #nav > .row:nth-child(2) > .item:nth-child(1) >a:before{ 50 background: url(img/06.png) no-repeat; 51 } 52 #nav > .row:nth-child(2) > .item:nth-child(2) >a:before{ 53 background: url(img/07.png) no-repeat; 54 } 55 #nav > .row:nth-child(2) > .item:nth-child(3) >a:before{ 56 background: url(img/08.png) no-repeat; 57 } 58 #nav > .row:nth-child(2) > .item:nth-child(4) >a:before{ 59 background: url(img/09.png) no-repeat; 60 } 61 #nav > .row:nth-child(2) > .item:nth-child(5) >a:before{ 62 background: url(img/10.png) no-repeat; 63 } 64 </style> 65 </head> 66 <body> 67 <div id="nav"> 68 <div class="row"> 69 <div class="item"> 70 <a href="javascript:;">天狗</a> 71 </div> 72 <div class="item"> 73 <a href="javascript:;">聚划算</a> 74 </div> 75 <div class="item"> 76 <a href="javascript:;">天狗国际</a> 77 </div> 78 <div class="item"> 79 <a href="javascript:;">外卖</a> 80 </div> 81 <div class="item"> 82 <a href="javascript:;">天狗超市</a> 83 </div> 84 </div> 85 <div class="row"> 86 <div class="item"> 87 <a href="javascript:;">充值中心</a> 88 </div> 89 <div class="item"> 90 <a href="javascript:;">海峰旅行</a> 91 </div> 92 <div class="item"> 93 <a href="javascript:;">领金币</a> 94 </div> 95 <div class="item"> 96 <a href="javascript:;">拍卖</a> 97 </div> 98 <div class="item"> 99 <a href="javascript:;">分类</a> 100 </div> 101 </div> 102 </div> 103 </body> 104 </html>