微信小程序 CSS flex嵌套布局实现横向滚动图片效果

微信小程序 与 HTML/CSS网页端 相似,

微信端切换标签为view即可

给大家推荐个Flex布局的网站,在线flex效果预览和代码生成,帮助你快速实现布局效果.

https://flexbox.tech/

 

 

复制代码
  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>
复制代码

 

 

效果图

 

posted @   伊凡晴天  阅读(867)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛