微信小程序 與 HTML/CSS網頁端 相似,
微信端切換標簽為view即可
給大家推薦個Flex布局的網站,在線flex效果預覽和代碼生成,幫助你快速實現布局效果.
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>flex嵌套測試</title> 9 <style> 10 .box { 11 display: flex; 12 width: 1024px; 13 height: 768px; 14 background: rgba(131, 131, 131, 0.5); 15 margin: 0 auto; 16 margin-top: 50px; 17 flex-wrap: wrap; 18 } 19 20 .content { 21 display: flex; 22 width: 100%; 23 height: 300px; 24 margin: 50px; 25 line-height: 180px; 26 27 } 28 29 .left_box, 30 .center_box, 31 .right_box { 32 display: flex; 33 width: 200px; 34 height: 200px; 35 display: flex; 36 text-align: center; 37 flex-wrap: wrap; 38 background-color: rgb(113, 84, 161); 39 font-size: 23px; 40 } 41 42 .left_box { 43 flex: 1.5; 44 background-color: rgba(216, 109, 33, 0.5); 45 } 46 47 .left_box, 48 .center_box, 49 .right_box { 50 margin: 10px; 51 } 52 53 .center_box { 54 flex: 7; 55 display: flex; 56 flex-direction: row; 57 flex-direction: column; 58 width: 100%; 59 overflow-x: auto; 60 height: 300rpx; 61 box-shadow: 5px 5px 20px 5px rgba(20, 20, 20, 0.3); 62 border: 1px solid rgb(199, 199, 199); 63 } 64 65 .content .picture { 66 width: 50%; 67 } 68 69 .right_box { 70 flex: 1.5; 71 background-color: rgba(210, 30, 180, 0.3); 72 } 73 74 .p1 { 75 background: rgba(251, 10, 10, 0.3); 76 } 77 78 .p2 { 79 background: rgba(247, 155, 7, 0.3); 80 } 81 82 .p3 { 83 background: rgba(10, 245, 10, 0.3); 84 } 85 86 .p4 { 87 background: rgba(161, 241, 12, 0.3); 88 } 89 90 .p5 { 91 background: gray; 92 } 93 </style> 94 </head> 95 <body> 96 <!-- 核心代碼 --> 97 <section class="box"> 98 <div class="content content2"> 99 <div class="left_box">左側-盒子</div> 100 <div class="center_box"> 101 <div class="picture p1">圖片1</div> 102 <div class="picture p2">圖片2</div> 103 <div class="picture p3">圖片3</div> 104 <div class="picture p4">圖片4</div> 105 <div class="picture p5">圖片5</div> 106 <div class="picture p6">圖片6</div> 107 </div> 108 <div class="right_box">右側-盒子</div> 109 </div> 110 <div class="content content2"> 111 <div class="left_box">左側-盒子</div> 112 <div class="center_box"> 113 <div class="picture p1">圖片1</div> 114 <div class="picture p2">圖片2</div> 115 <div class="picture p3">圖片3</div> 116 <div class="picture p4">圖片4</div> 117 <div class="picture p5">圖片5</div> 118 <div class="picture p6">圖片6</div> 119 </div> 120 <div class="right_box">右側-盒子</div> 121 </div> 122 </section> 123 <!-- 核心代碼 結束--> 124 </body> 125 </html>
效果圖
