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

这篇具有很好参考价值的文章主要介绍了解决弹性布局父元素设置高自动换行,子元素均分高度问题(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>

效果
解决弹性布局父元素设置高自动换行,子元素均分高度问题(align-content: flex-start),css,vue,uniapp,javascript,css,css3
当循环的item大于足够多的时候(垂直的高度大于父元素的高造成可以滑动的情况下)
解决弹性布局父元素设置高自动换行,子元素均分高度问题(align-content: flex-start),css,vue,uniapp,javascript,css,css3
情况就很正常。
但是要在item少的情况下也要是这样的效果。
这个时候就需要用到align-content: flex-start;
解决弹性布局父元素设置高自动换行,子元素均分高度问题(align-content: flex-start),css,vue,uniapp,javascript,css,css3

对于vue也是一样的解决办法。文章来源地址https://www.toymoban.com/news/detail-835526.html

到了这里,关于解决弹性布局父元素设置高自动换行,子元素均分高度问题(align-content: flex-start)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端小案例3:Flex弹性布局行内元素宽度自适应

    项目背景:需要在一行上展示空调设备的三个模式(制冷、制热、通风)或者两个模式(制冷、制热);因为不同产品的模式数量不同,因此需要让模式按钮的宽度自适应,有两个模式时,单个模式宽度占据50%;三模式时,宽度占据33.3%。 可以使用Grid和Flex 弹性布局实现。

    2024年02月04日
    浏览(47)
  • 【前端】CSS(引入方式+选择器+常用元素属性+盒模型+弹性布局)

    层叠样式表(Cascading Style Sheets) 对元素位置的排版进行精确控制,实现结构和样式的分离 CSS 控制页面的展示效果 HTML决定页面的结构 选择器+{一条/N条声明} 选择器:要修改谁 声明:具体要修改什么内容。声明的属性是键值对,用分号区分,键和值用: 通常情况下,把style放

    2024年04月15日
    浏览(53)
  • CSS弹性布局常用设置

    目录 一、单位元素 二、弹性容器 三、常用属性 三、项目实战效果 vm 1vm 为视口的1% vh 视口高的1% vmin 参照长边 vmax 参照长边 rem 等比缩放 需要设置最外层盒子html设置vw 根字号html的--- font-- 1vm 去适配 初始化 设置一个容器元素为弹性块状元素(内部允许有弹性元素flex撑开)   

    2024年02月11日
    浏览(50)
  • 父元素设置max-height,子元素高度设置百分比,子元素继承父元素高度失败

    需求描述: 小程序里碰到的,最外层page高度 100%,里边第一层盒子高度为 max-height: 60%; 第一层盒子里有 title,content,这个 content 高度要随着第一层盒子高度走,最高为第一层盒子的高度减去 title 的高度,如果高度超出第一层盒子高度了需要做滚动处理。 写了一个 html 模拟一

    2024年02月11日
    浏览(38)
  • flex 布局 一行两个 超出自动换行

    2024年02月12日
    浏览(42)
  • HTML元素中有中文、英文、符号、数字。第一行没排满就自动换行的解决办法:word-break:break-all的使用

    word-break: break-all 是一个CSS属性,用于控制文本在容器中的换行方式。它的作用是强制在任意字符之间进行换行,即使这样可能会导致单词被分割。 具体来说, word-break 属性有以下几个取值: normal (默认值):默认的换行行为。单词不会被分割,会根据容器的宽度自动换行。

    2024年02月15日
    浏览(45)
  • 前端Vue uni-app简单实用通用标签栏自动换行 自适应高度 可设置行数 可改标签颜色

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月05日
    浏览(80)
  • VsCode设置是否自动换行

    在使用vscode中,根据情景需要设置自动换行,打开自动换行,如下图红框所示,如果一行过长,就会自动拆成两行甚至多行: 1、左下角设置 2、点设置 3、文本编辑器中对的Word Wrap设置是否换行

    2024年02月13日
    浏览(52)
  • idea怎么设置自动换行

    1.首先,点击【Settings】,在idea首页中找到左上角File,下拉找到Settings。  2.然后,选中【General】选项,在设置中找到Editor选中里面的General。 3.最后,添加【*java】文字,在General的右方找到Soft-wrap中加入*java即可自动换行。    

    2024年02月10日
    浏览(40)
  • vscode使用-设置自动换行

    vscode使用过程中发现代码很长时,也不会自动换行,导致需要拖拽滚轮查看完整代码,网上搜索设置 自动换行 1、vscode编辑器窗口,依次点击左上角的\\\'File\\\'--\\\'Preferences\\\'--\\\'Settings\\\',打开settings窗口(快捷键:ctrl+, ) 2、在settings窗口的搜索框中输入“word wrap”,将“Editor:Word Wr

    2024年02月03日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包