当前位置: 首页 > 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也是一样的解决办法。

http://www.lryc.cn/news/305509.html

相关文章:

  • 什么是负载均衡集群?
  • 【es6】的新特性
  • Java中的多线程是如何实现的?
  • C++知识点总结(22):模拟算法
  • opengl 学习纹理
  • STM32控制max30102读取血氧心率数据(keil5工程)
  • 高级语言期末2011级A卷
  • SpringAMQP消息队列
  • 二次元风格个人主页HTML源码
  • 每日学习录
  • linux docker部署深度学习环境(docker还是conda)
  • iOS面试:4.多线程GCD
  • 云计算计算资源池与存储池访问逻辑
  • 【Linux】部署单机项目(自动化启动)---(图文并茂详细讲解)
  • 修复Microsoft Edge WebView2无法安装的问题
  • Linux命令-chgrp命令(用来变更文件或目录的所属群组)
  • linux下搭建boost、muduo、mysql、nginx
  • java基础-List常用方法
  • Android 如何添加自定义字体
  • MacOs 围炉夜话
  • 爬取数位观察城市数据知识总结
  • [About-C++] 非常实用的知识点
  • 渗透工具——kali中wpscan简介
  • 信息安全计划:它是什么、为什么需要一个以及如何开始
  • 【软件测试】定位前后端bug总结+Web/APP测试分析
  • Github 2024-02-21 开源项目日报 Top10
  • 机器学习模型的过拟合与欠拟合
  • 华为OD机试真题-虚拟游戏理财-2023年OD统一考试(C卷)---Python3--开源
  • 新手搭建服装小程序全攻略
  • 设计模式学习笔记 - 面向对象 - 3.面向对象比面向过程有哪些优势?面向过程真的过时了吗?