CSS-利用flex布局横向滚动
默认小于4条信息左右两端对齐 超出添加滚动
示例:
1 2 3 4 5 6 7 8 9 10 11 12 | < view class="padding-style"> < view class='overflow-company-second'> < view class="special-list"> < view class='active'>发现简书</ view > < view >我的关注</ view > < view >消息评论</ view > < view >投稿请求</ view > < view >喜欢和赞</ view > < view >赞赏和付费</ view > </ view > </ view > </ view > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | .padding-style{ padding: 0 28rpx; } .overflow-company-second{ overflow: hidden; height: 88rpx; border-bottom: 1px solid #ccc; } .special-list{ line-height: 88rpx; font-size: 30rpx; display: flex; overflow-x: auto; justify-content: space-between; padding-bottom: 40rpx; } .special-list>view{ text-align: center; font-size: 30rpx; color: #283B42; font-weight: bold; flex-basis: 172rpx; flex-shrink: 0; white-space: nowrap; } .special-list>view.active { position: relative; } .special-list>view.active::before { content: ""; display: block; clear: both; width: 120rpx; height: 6rpx; background-image: linear-gradient(90deg, #ea6f5a 58%, #eebeb6 100%); border-radius: 40rpx; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); } |
主要使用的标签
display: flex
flex布局justify-content: space-between
位于首尾两端的子容器两端对齐flex-basis: 172rpx
子容器基准大小 表示在不伸缩的情况下子容器的原始尺寸flex-shrink: 0
收缩比例white-space: nowrap
规定段落中的文本不进行换行overflow-x: auto
横向溢出元素的内容区域添加滚动
作者:柏龙
链接:https://www.jianshu.com/p/e695a79f3d45
来源:简书
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析