当前位置: 首页 > news >正文

解决弹性布局父元素设置高自动换行,子元素均分高度问题(align-content: flex-start)

案例:

<view class="abc"><view class="abc-item" v-for="(item,index) in 8" :key="index">看我</view>
</view>
<style lang="less">.abc{height: 100px;display: flex;flex-wrap: wrap;overflow-y: scroll;&-item{padding: 0 20rpx;margin-right: 10rpx;}}
</style>

效果
在这里插入图片描述
当循环的item大于足够多的时候(垂直的高度大于父元素的高造成可以滑动的情况下)
在这里插入图片描述
情况就很正常。
但是要在item少的情况下也要是这样的效果。
这个时候就需要用到align-content: flex-start;
在这里插入图片描述

对于vue也是一样的解决办法。

相关文章:

  • 【思路】短链生成及访问
  • vivo 基于 StarRocks 构建实时大数据分析平台,为业务搭建数据桥梁
  • 获取视频第一帧,以及后续上传
  • Zabbix 6.2.1 安装
  • Jenkins解决Host key verification failed (2)
  • RandAugment(NeurIPS 2020)论文速读
  • C++学习规划“的 PPT 大纲设计
  • sql注入 [极客大挑战 2019]FinalSQL1
  • hbuilderx创建、运行uni-app
  • B树的介绍
  • xxl-job架构原理讲解
  • 剑指offer面试题18 树的子结构
  • C语言:指针的进阶讲解
  • vue+node.js美食分享推荐管理系统 io551
  • MYSQL--存储过程操作
  • Babel配置的不完全指南
  • ES6系统学习----从Apollo Client看解构赋值
  • httpie使用详解
  • Java Agent 学习笔记
  • js中的正则表达式入门
  • LeetCode29.两数相除 JavaScript
  • SpringBoot几种定时任务的实现方式
  • Sublime Text 2/3 绑定Eclipse快捷键
  • 大型网站性能监测、分析与优化常见问题QA
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 基于遗传算法的优化问题求解
  • 简单实现一个textarea自适应高度
  • 七牛云假注销小指南
  • 什么软件可以剪辑音乐?
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • 小程序button引导用户授权
  • 验证码识别技术——15分钟带你突破各种复杂不定长验证码
  • Oracle Portal 11g Diagnostics using Remote Diagnostic Agent (RDA) [ID 1059805.
  • 函数计算新功能-----支持C#函数
  • ​ 轻量应用服务器:亚马逊云科技打造全球领先的云计算解决方案
  • #考研#计算机文化知识1(局域网及网络互联)
  • (笔记)Kotlin——Android封装ViewBinding之二 优化
  • (定时器/计数器)中断系统(详解与使用)
  • (附源码)spring boot校园健康监测管理系统 毕业设计 151047
  • (附源码)ssm航空客运订票系统 毕业设计 141612
  • (附源码)ssm户外用品商城 毕业设计 112346
  • (原創) 未来三学期想要修的课 (日記)
  • (转)C语言家族扩展收藏 (转)C语言家族扩展
  • (转)从零实现3D图像引擎:(8)参数化直线与3D平面函数库
  • (转载)PyTorch代码规范最佳实践和样式指南
  • **PyTorch月学习计划 - 第一周;第6-7天: 自动梯度(Autograd)**
  • .net core Swagger 过滤部分Api
  • .NET/C# 获取一个正在运行的进程的命令行参数
  • .NET/C# 将一个命令行参数字符串转换为命令行参数数组 args
  • .net6 webapi log4net完整配置使用流程
  • .NET单元测试
  • .NET教程 - 字符串 编码 正则表达式(String Encoding Regular Express)
  • .NET应用架构设计:原则、模式与实践 目录预览
  • .net中的Queue和Stack
  • @Autowired和@Resource的区别