flex多行两端布局(消除行间距,不满时左对齐)

news/2024/7/10 1:38:07 标签: css, vue

当数量不足时,用不显示的元素补足数量,即可完成不满时左对齐
垂直方向设置align-content: flex-start;即可实现换行时无行间距,之后自行设置样式可控制行间距

父元素样式

css">.swiper-item{
display: flex;
align-items: center;
justify-content: space-between;
flex-flow:row wrap;
align-content: flex-start;
}
<view class="swiper_box">
				<swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" :indicator-active-color="active_color">
					<swiper-item class="swiper-item " v-for="(v, i) in listTemp" :key="i">
						<view class="cell" v-for="(w, j) in v" :key="j" :class="w.class">
							<text>{{w.txt}}</text>
						</view>
						<view class="" v-for="index of 10-v.length" :key="index"><!--不满十个时,用不现实的元素补足十个-->
							
						</view>
					</swiper-item>
				</swiper>
			</view>

效果:
在这里插入图片描述
在这里插入图片描述


http://www.niftyadmin.cn/n/1355300.html

相关文章

空间三角形_这个厉害了!三角形格局二居室,实现空间的最大化利用

平面布置图在入户玄关走廊的两侧都做了嵌入式的鞋柜&#xff0c;这样既不会影响走廊的通行效果&#xff0c;又能让小户型拥有更多的储物空间&#xff0c;其中一侧的鞋柜可以做成带有换鞋凳的款式。走过玄关就到了客厅和儿童房空间&#xff0c;儿童房现在是一个开放式的空间&…

小程序:rpx与px混合计算

实现&#xff1a;(44px-40rpx)/2 style() {//#ifdef MP-WEIXINlet systemInfo uni.getSystemInfoSync()let px (44-(systemInfo.windowWidth/750)*40)/2;return top:${systemInfo.statusBarHeight}px;margin-top:${px}px//#endif//#ifdef APP-PLUSreturn //#endif}

c++ malloc能给string_c 常见面试题30道

1.new、delete、malloc、free关系delete会调用对象的析构函数,和new对应free只会释放内存&#xff0c;new调用构造函数。malloc与free是C/C语言的标准库函数&#xff0c;new/delete是C的运算符。它们都可用于申请动态内存和释放内存。对于非内部数据类型的对象而言&#xff0c;…

webpack:Error: Cannot find module ‘@babel/core‘

配置webpack使用babel-loader是出现报错&#xff1a; Error: Cannot find module babel/core是由于babel-loader与babel-core版本不匹配所造成的 建议把babel升级到最新版本。 npm install -D babel/core babel/preset-env

logistic回归 简介_面经之逻辑回归的广义线性回归与最大熵解释wtf

试着从3个角度来解释逻辑回归&#xff1f;&#xff08;1、概率角度分析逻辑回归&#xff1b;2、GLM角度分析线性回归和逻辑回归&#xff1b;3、最大熵模型和逻辑回归的关联&#xff1b;&#xff09;1、从概率角度分析&#xff0c;上图是最常见的一个条件分布表达式&#xff0c;…

webpack入门,配置实例

结构&#xff1a; webpack.config.js // webpack.config.js const webpack require ("webpack"); const HtmlWebpackPlugin require(html-webpack-plugin); module.exports {// entry: {// main:__dirname /src/main.js, // 对象方式最可拓展&#xff0c;多…

android source镜像源_Celadon快速上路指南Part2:编译Celadon镜像

一目了然 | Celadon 新手上路快速通道隆重揭晓 | 打开Celadon 的正确姿势上一期我们向您介绍了如何安装Celadon预编译镜像(Celadon快速上路指南 Part1&#xff1a;安装Celadon镜像)&#xff0c;本期我们将向您介绍如何建立Celadon的开发环境&#xff0c;编译制作您自己的Cel…

未知高度元素内的垂直居中

高度为auto&#xff0c;被兄弟元素撑开的元素&#xff0c;需要内容垂直居中&#xff0c;这时vertical-align&#xff1a;middledisplay&#xff1a;inline-block&#xff1b;和定位、加上边距、设置行高等方式做垂直居中就不太好用了。这里用display:flex可以很好解决。 父元素…