uni-app的flex盒模型与布局进阶写法（高手勿进）

最新推荐文章于 2024-08-14 15:17:32 发布
最新推荐文章于 2024-08-14 15:17:32 发布
阅读量5.1k 收藏 31
点赞数 17
分类专栏： 前端 文章标签： vue.js css html sass uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/steve95/article/details/116014510
版权

uni-app的flex盒模型与布局进阶写法（高手勿进）

官方文档

许多细节不多赘述，细枝末节还是看官方文档
盒模型
flex布局

盒模型的进阶操作

在这里插入图片描述
盒模型其实很简单，主要是对于margin和padding以及border的使用
可以这样去理解，margin向外扩展，padding是向内缩减，border是对边框的操作，content在这里我们不去关注，content将会在下面的flex布局中去讨论。
这个部分讲几个我认为比较有用的写法：

  1. 圆角框
    在这里插入图片描述
<template>
	<view class="">
		<view class="example_one">
			这是一个圆角框
		</view>
	</view>
</template>

.example_one {
	background-color: #ffff00;
	width: 100%;
	height: 300rpx;
	padding: 25rpx 25rpx; /* 向内压缩空间,否者内容会显示在框外，大家可以试试不写这行代码，内容会怎么样 */
	border-radius: 25rpx; /* 使四个角都为圆角 */
	margin: 50rpx auto;/* 居中并使上下编剧各位25rpx */
}
  1. 上圆角背景
    在这里插入图片描述
<template>
	<view class="content">
		<view >
			这行可以是搜索栏
		</view>
		<view class="example_two">
			这是一个上圆角背景
		</view>
	</view>
</template>

.content{
	background-color: #C0C0C0;
}
.example_two{
	background-color: #FFFFFF;
	height: 300rpx;
	padding: 25rpx 25rpx; /* 向内压缩空间,否者内容会显示在框外，大家可以试试不写这行代码，内容会怎么样 */
	border-radius: 35rpx 35rpx 0 0; /* 使上面两个角为圆角 */
	margin-top: 50rpx;
}

flex布局

有些小伙伴看了uni-app的flex布局文档后，可能还是比较迷糊，不知道怎么灵活的去写样式，下面将会从易到难的去分析几个样式

  1. 左整右散
    假如现在我们想写这样一个样式
    在这里插入图片描述
  • 首先我们应该分析这个布局，对其进行标号
    在这里插入图片描述
    将其划分为左右两部分（1）（2，3，4），这两部分同级，右边三部分同级
  • 那么下面看代码
<template>
	<view class="content">
		<view class="left">
			1
		</view>
		<view class="right">
			<view class="l1">
				2
			</view>
			<view class="l2">
				3
			</view>
			<view class="l3">
				4
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.content{
		display: flex;
		flex-direction: row;
		background-color: #999999;
		padding: 30rpx 30rpx;
		justify-content: space-between;
		.left{
			background-color: #FFFFFF;
			width: 30%;
			height: 300rpx;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 60%;
			.l1{
				background-color: #FFFFFF;
				width: 100%;
				height: 90rpx;
			}
			.l2{
				background-color: #FFFFFF;
				width: 100%;
				height: 90rpx;
			}
			.l3{
				background-color: #FFFFFF;
				width: 100%;
				height: 90rpx;
			}
		}
	}
</style>

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

  1. 上整下散
    假如现在我们想要做这样一个样式
    在这里插入图片描述
  • 那么我们将其划分为上下两块（1）（1，2，3），1和（2，3，4）是同级的，2，3，4是同级的
  • 代码和上面的大同小异，只做了部分修改，代码如下：
<template>
	<view class="content">
		<view class="left">
			1
		</view>
		<view class="right">
			<view class="l1">
				2
			</view>
			<view class="l2">
				3
			</view>
			<view class="l3">
				4
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.content{
		display: flex;
		flex-direction: column;
		background-color: #999999;
		padding: 30rpx 30rpx;
		justify-content: space-between;
		align-items: center;
		height: 300rpx;
		.left{
			background-color: #FFFFFF;
			width: 90%;
			height: 100rpx;
		}
		.right{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 90%;
			.l1{
				background-color: #FFFFFF;
				width: 25%;
				height: 150rpx;
			}
			.l2{
				background-color: #FFFFFF;
				width: 25%;
				height: 150rpx;
			}
			.l3{
				background-color: #FFFFFF;
				width: 25%;
				height: 150rpx;
			}
		}
	}
</style>

在这里插入图片描述

  1. 实战——帖子
    现在我们想做这样一个帖子的样式：
    在这里插入图片描述
    按照上面的步骤来：
  • 划分元素块
    在这里插入图片描述
    这样就一目了然了，到底哪些是一级的，哪些在下面一级，首先应该把框架用代码敲出来
<view class="tiezi">
	<view class="l1">
			<image src="" mode="aspectFit" class="headicon"></image>
			<view class="namedate">
				<text class="name"></text>
				<text class="date"></text>
			</view>
		</view>
		<view class="l2">

		</view>
		<view class="l3">
			<view v-for="(item1,index) in item.pic" :key="index">

			</view>
		</view>
		<view class="l4">
			<view class="zan">

				<view class="">

				</view>
			</view><text style="color: #a6a6a6;">|</text>
			<view class="comment">

				<view class="">

				</view>
			</view><text style="color: #a6a6a6;">|</text>
			<view class="eye">
				
				<view class="">

				</view>
			</view>
		</view>
	</view>
</view>
  • 然后再向框架里面填充元素并写样式，代码如下，其中图片的资源大家可以自行替换看效果，我就不放上去了
<view class="tiezi">
	<view class="l1">
		<image v-if="item.headicon" :src="item.headicon" mode="aspectFit" class="headicon"></image>
		<view class="namedate">
			<text class="name">{{item.name}}</text>
			<text class="date">{{item.date}}</text>
		</view>
	</view>
	<view class="l2">
		<text>{{item.cotent}}</text>
	</view>
	<view class="l3">
		<view v-for="(item1,index) in item.pic" :key="index">
			<image v-if="item1" :src="item1" mode="aspectFill" class="contentpic"></image>
		</view>
	</view>
	<view class="l4">
		<view class="zan">
			<image src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktaGFuZC10aHVtYnMtdXAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTguODY0LjA0NkM3LjkwOC0uMTkzIDcuMDIuNTMgNi45NTYgMS40NjZjLS4wNzIgMS4wNTEtLjIzIDIuMDE2LS40MjggMi41OS0uMTI1LjM2LS40NzkgMS4wMTMtMS4wNCAxLjYzOS0uNTU3LjYyMy0xLjI4MiAxLjE3OC0yLjEzMSAxLjQxQzIuNjg1IDcuMjg4IDIgNy44NyAyIDguNzJ2NC4wMDFjMCAuODQ1LjY4MiAxLjQ2NCAxLjQ0OCAxLjU0NSAxLjA3LjExNCAxLjU2NC40MTUgMi4wNjguNzIzbC4wNDguMDNjLjI3Mi4xNjUuNTc4LjM0OC45Ny40ODQuMzk3LjEzNi44NjEuMjE3IDEuNDY2LjIxN2gzLjVjLjkzNyAwIDEuNTk5LS40NzcgMS45MzQtMS4wNjRhMS44NiAxLjg2IDAgMCAwIC4yNTQtLjkxMmMwLS4xNTItLjAyMy0uMzEyLS4wNzctLjQ2NC4yMDEtLjI2My4zOC0uNTc4LjQ4OC0uOTAxLjExLS4zMy4xNzItLjc2Mi4wMDQtMS4xNDkuMDY5LS4xMy4xMi0uMjY5LjE1OS0uNDAzLjA3Ny0uMjcuMTEzLS41NjguMTEzLS44NTcgMC0uMjg4LS4wMzYtLjU4NS0uMTEzLS44NTZhMi4xNDQgMi4xNDQgMCAwIDAtLjEzOC0uMzYyIDEuOSAxLjkgMCAwIDAgLjIzNC0xLjczNGMtLjIwNi0uNTkyLS42ODItMS4xLTEuMi0xLjI3Mi0uODQ3LS4yODItMS44MDMtLjI3Ni0yLjUxNi0uMjExYTkuODQgOS44NCAwIDAgMC0uNDQzLjA1IDkuMzY1IDkuMzY1IDAgMCAwLS4wNjItNC41MDlBMS4zOCAxLjM4IDAgMCAwIDkuMTI1LjExMUw4Ljg2NC4wNDZ6TTExLjUgMTQuNzIxSDhjLS41MSAwLS44NjMtLjA2OS0xLjE0LS4xNjQtLjI4MS0uMDk3LS41MDYtLjIyOC0uNzc2LS4zOTNsLS4wNC0uMDI0Yy0uNTU1LS4zMzktMS4xOTgtLjczMS0yLjQ5LS44NjgtLjMzMy0uMDM2LS41NTQtLjI5LS41NTQtLjU1VjguNzJjMC0uMjU0LjIyNi0uNTQzLjYyLS42NSAxLjA5NS0uMyAxLjk3Ny0uOTk2IDIuNjE0LTEuNzA4LjYzNS0uNzEgMS4wNjQtMS40NzUgMS4yMzgtMS45NzguMjQzLS43LjQwNy0xLjc2OC40ODItMi44NS4wMjUtLjM2Mi4zNi0uNTk0LjY2Ny0uNTE4bC4yNjIuMDY2Yy4xNi4wNC4yNTguMTQzLjI4OC4yNTVhOC4zNCA4LjM0IDAgMCAxLS4xNDUgNC43MjUuNS41IDAgMCAwIC41OTUuNjQ0bC4wMDMtLjAwMS4wMTQtLjAwMy4wNTgtLjAxNGE4LjkwOCA4LjkwOCAwIDAgMSAxLjAzNi0uMTU3Yy42NjMtLjA2IDEuNDU3LS4wNTQgMi4xMS4xNjQuMTc1LjA1OC40NS4zLjU3LjY1LjEwNy4zMDguMDg3LjY3LS4yNjYgMS4wMjJsLS4zNTMuMzUzLjM1My4zNTRjLjA0My4wNDMuMTA1LjE0MS4xNTQuMzE1LjA0OC4xNjcuMDc1LjM3LjA3NS41ODEgMCAuMjEyLS4wMjcuNDE0LS4wNzUuNTgyLS4wNS4xNzQtLjExMS4yNzItLjE1NC4zMTVsLS4zNTMuMzUzLjM1My4zNTRjLjA0Ny4wNDcuMTA5LjE3Ny4wMDUuNDg4YTIuMjI0IDIuMjI0IDAgMCAxLS41MDUuODA1bC0uMzUzLjM1My4zNTMuMzU0Yy4wMDYuMDA1LjA0MS4wNS4wNDEuMTdhLjg2Ni44NjYgMCAwIDEtLjEyMS40MTZjLS4xNjUuMjg4LS41MDMuNTYtMS4wNjYuNTZ6Ii8+PC9zdmc+"
				mode="" class="icon" @click="zan(zanicon)"></image>
			<view class="">
				{{item.zan}}
			</view>
		</view><text style="color: #a6a6a6;">|</text>
		<view class="comment">
			<image
				src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hhdC1zcXVhcmUtZG90cyIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMTQgMWExIDEgMCAwIDEgMSAxdjhhMSAxIDAgMCAxLTEgMWgtMi41YTIgMiAwIDAgMC0xLjYuOEw4IDE0LjMzMyA2LjEgMTEuOGEyIDIgMCAwIDAtMS42LS44SDJhMSAxIDAgMCAxLTEtMVYyYTEgMSAwIDAgMSAxLTFoMTJ6TTIgMGEyIDIgMCAwIDAtMiAydjhhMiAyIDAgMCAwIDIgMmgyLjVhMSAxIDAgMCAxIC44LjRsMS45IDIuNTMzYTEgMSAwIDAgMCAxLjYgMGwxLjktMi41MzNhMSAxIDAgMCAxIC44LS40SDE0YTIgMiAwIDAgMCAyLTJWMmEyIDIgMCAwIDAtMi0ySDJ6Ii8+PHBhdGggZD0iTTUgNmExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSAyIDB6bTQgMGExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSAyIDB6bTQgMGExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSAyIDB6Ii8+PC9zdmc+"
				mode="" class="icon"></image>
			<view class="">
				{{item.comment}}
			</view>
		</view><text style="color: #a6a6a6;">|</text>
		<view class="eye">
			<image
				src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZXllIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Ik0xNiA4cy0zLTUuNS04LTUuNVMwIDggMCA4czMgNS41IDggNS41UzE2IDggMTYgOHpNMS4xNzMgOGExMy4xMzMgMTMuMTMzIDAgMCAxIDEuNjYtMi4wNDNDNC4xMiA0LjY2OCA1Ljg4IDMuNSA4IDMuNWMyLjEyIDAgMy44NzkgMS4xNjggNS4xNjggMi40NTdBMTMuMTMzIDEzLjEzMyAwIDAgMSAxNC44MjggOGMtLjA1OC4wODctLjEyMi4xODMtLjE5NS4yODgtLjMzNS40OC0uODMgMS4xMi0xLjQ2NSAxLjc1NUMxMS44NzkgMTEuMzMyIDEwLjExOSAxMi41IDggMTIuNWMtMi4xMiAwLTMuODc5LTEuMTY4LTUuMTY4LTIuNDU3QTEzLjEzNCAxMy4xMzQgMCAwIDEgMS4xNzIgOHoiLz48cGF0aCBkPSJNOCA1LjVhMi41IDIuNSAwIDEgMCAwIDUgMi41IDIuNSAwIDAgMCAwLTV6TTQuNSA4YTMuNSAzLjUgMCAxIDEgNyAwIDMuNSAzLjUgMCAwIDEtNyAweiIvPjwvc3ZnPg=="
				mode="" class="icon"></image>
			<view class="">
				{{item.eye}}
			</view>
		</view>
	</view>
</view>

<style lang="scss">
	.tiezi {
	padding: 20rpx 26rpx;
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;

	.l1 {
		display: flex;
		flex-direction: row;
		gap: 15rpx;

		.headicon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			border: 1px solid #FFFFFF;
		}

		.namedate {
			display: flex;
			flex-direction: column;

			.name {
				font-size: 35rpx;
				font-weight: bold;
			}

			.date {
				font-size: 28rpx;
				color: #b0b0b0;
			}
		}
	}

	.l2 {
		margin-top: 20rpx;
	}

	.l3 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 15rpx;
		margin-top: 15rpx;

		.contentpic {
			height: 200rpx;
			width: 200rpx;
		}
	}

	.l4 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 70rpx;
		margin-top: 15rpx;
		.zan {
			gap: 10rpx;
			display: flex;
			flex-direction: row;
		}
		.comment{
			gap: 10rpx;
			display: flex;
			flex-direction: row;
		}
		.eye{
			gap: 10rpx;
			display: flex;
			flex-direction: row;
		}
	}
}
.icon {
	width: 35rpx;
	height: 35rpx;
	margin-top: 4rpx;
}
</style>
  1. 实战——进入自习室卡片样式
    在这里插入图片描述
  • 划分样式
    在这里插入图片描述
  • 上代码
<view v-for="(item,index) in cloudroom" :key="index" class="container">
	<view class="l1">
		{{item.name}}
	</view>
	<view class="l2">
		<view v-for="(item1,index) in cloudroom[index].sign" :key="index" class="sign">
			{{item1}}
		</view>
	</view>
	<view class="l3">
		<view v-for="(item2,index) in cloudroom[index].headicon" :key="index" class="headlist">
			<image v-if="item2":src="item2" mode="aspectFit" class="headicon"></image>
		</view>
		<view class="peoplenum">
			<!-- <image src="" mode="" class="numicon"></image> -->
			<text class="numtext">{{item.peoplenum}}人自习中</text>
		</view>
	</view>
</view>

<style lang="scss">
	.container{
		padding: 50rpx 50rpx;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		background-color: #FFFFFF;
		margin-bottom: 40rpx;
		margin-top: 40rpx;
		
		display: flex;
		flex-direction: column;
		.l1 {
			font-size: 40rpx;
			font-weight: bold;
		}
		.l2{
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			gap: 15rpx;
			.sign{
				font-size: 26rpx;
				border: 1rpx solid #e6e6e6;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				background-color: #e6e6e6;
			}
		}
		.l3{
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			.headicon{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 1px solid #FFFFFF;
				margin-left: -10rpx;
			}
			.peoplenum{
				display: flex;
				flex-direction: column;
				font-size: 26rpx;
				color: #ababab;
				margin-top: 40rpx;
				margin-left: 200rpx;
			}
		}
	}
</style>

总结

以上就是盒模型与flex布局的进阶写法了，要点就是首先要划分出各个级别的元素，然后要注意的是image和view都是块级元素，是同一级别的

对您有用的话记得给个三连哟~

SNiFe_Blog
关注
专栏目录
uniapp 三级折叠列表(展开/收起)
颜浩的博客
12-23 1万+
1.view部分 <template> <view class="content"> <view class="position-group"> <!-- 一级循环 --> <view class="pronames_one" v-for="(item,index) in positionlist" :key="index" :class="item.oneliststare?'oneshow':'onehide'">
【uni-app】uni-app实现聊天页面功能（小程序）——布局篇
hanachann的博客
04-11 1万+
在工作中使用uni-app参与开发一个小程序，其中要写一个简单的聊天页面，虽然功能不多（只有一个发送文字的功能），但是其中的细节比较多，也踩过很多坑，特此记录下来。要实现的页面如图所示，该篇主要讲讲如何布局（参考了很多文章之后根据页面需求进行一个整合）。
uni-app 使用九宫格（uni-grid）布局组件
最新发布
u013948083的专栏
08-14 968
uni-app 的 uni-grid 组件引入和开发步骤
uni-app开发实例
03-16
开发实例，包含页，tab自定义导航栏，滑动列表，搜索页面等
uniapp的盒模型
m0_65715940的博客
12-01 523
flex-direction：可以设置按行排列column和按列排列row。这里主要是用到盒模型，class类可以设置属性样式,可以设置排列方式。如果一个左右排列的组件，右边组件需要换行，首行对齐，可以使用如下方式。display flex盒模型可以设置margin和padding。每个组件是一个view,必须包含一个总的view，固定写法。align-items:盒模型的内容位置center。会存在有滚动条的情况要在页面或者app.vue中设置。justify-content:设置盒模型开始位置。
uni-app学习小记--4（盒模型）
qq_52922303的博客
02-04 567
对于盒模型的理解我认为十分简单，将其看作一个盒子，那么我们所要展现的元素或者全局要体现出来的样式，可以通过一个一个小盒子来装载和构造；
uni-app简单布局登录页面实例
u013008898的博客
05-07 4536
<template> <view class="content"> <view class="avatorWrapper"> <view class="avator"> <image class="img" src="/static/logo.png" mode="widthFix"></image> </view> </view> <view class="form"&.
uni-app适配布局参考
m0_73075579的博客
03-07 1961
1.微信小程序+使用原生导航栏。2.微信小程序+不使用导航栏。3.微信小程序+自定义导航栏。
uni-app跨平台开发
o1dkdj的博客
06-15 807
Uni-app 框架提供了许多平台原生的 UI 控件和 API 的访问，但是这些控件和 API 在不同平台之间的支持和表现情况会有所不同，因此我们需要注意在编写代码时尽量避免使用不同平台独有的 API 或特性，同时要特别关注不同平台之间的差异，以便在不同平台上运行时代码能够正确地工作。Uni-app 运行在多个平台上，每个平台的特点是不同的。最后，总体来说，Uni-app 的跨平台开发提供了许多可能性和便利性，但也需要在搭建过程中注意兼容性问题，同时进行版本控制和测试，从而确保应用程序能够稳定地运行。
Vue3 + Ts + Pinia + uni-app 学习笔记
qq_33365152的博客
09-13 597
Vue3 +Ts + Pinia + uni-app 学习笔记
uni-app基础知识
baidu_33575737的博客
06-29 1555
uni-app的基本使用 课程介绍： 基础部分： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 uni-app中样式学习 在uni-app中使用字体图标和开启scss 条件注释跨端兼容 uni中的事件 导航跳转 组件创建和通讯，及组件的生命周期 uni-app中使用uni-ui库 uni-app介绍 官方网页 uni-app 是一个使用 Vue.js 开发所
uni-app
qq_50613817的博客
06-21 325
文章目录uni-app基础使用介绍环境搭建创建项目并运行配置微信小程序项目目录开发规范全局配置和页面配置pages.json 初始样式pages 是页面配置globalStyle 是全局配置全局配置（pages.json）页面配置创建新项目配置基本的tabbarcondition启动模式配置基础组件text 组件的基本使用view组件的基本使用button按钮组件的基本使用image组件的基本使用uni中样式的学习及如何使用scss和字体图标基础的数据双向绑定v-bind和v-for的使用v-bindv-f
写uni-app时用到的Flex布局
CosecantY的博客
10-19 1903
最近刚写完一套小安卓app项目，原生安卓实在太难写了，所以来研究研究uni-app。 uni-app是一套代码可打包为多种程序，因此要保证这一套代码能适配多平台。（据说一套代码能上线安卓app、IOSapp、微信小程序、QQ小程序等一大堆平台） 所以啊，官方也推荐写界面的时候用flex布局，能很大程度上适配多个平台。 之前写界面很少用到flex，感觉用不太明白，所以今天又回来研究了。 简单看了看官方给的模板里，就是用到了弹性布局的例子，自己也试着写了一下，感觉悟了，这不就是Android的布局文件里
UNIAPP实战项目笔记39 我的页面布局
Ggome的博客
11-17 3321
common 公共文件：全局css文件 || 全局js文件。pages.json 配置文件： 导航、 tabbar、 路由。manifest.json 配置文件： appid、logo…App.vue 全局配置：样式、全局监视。static 静态资源：图片、字体图标。main.js vue初始化入口文件。具体图片自己替换哈，随便找了个图片的做示例。components 组件。my.vue 我的页面布局。
【uni-app】Flex布局
热门推荐
明月沉江春雾晓
06-20 3万+
文章目录Flex布局的概念Flex的属性 Flex布局的概念 特点： flexible box：弹性盒状布局 容器控制内部元素的布局定位 CSS3引入的新布局模型 伸缩元素，自由填充，自适应 优势： 可在不同方向排列元素 控制元素排序的方向 控制元素的对齐方式 控制元素之间等距 控制单个元素放大与缩放比例、占比、对齐方式 flex布局的常用术语： flex container:fle...
uni-app的uni-list列表组件高效使用举例 (仿知乎日报实现)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
06-20 4111
uni-list是Uni-App框架内置的一个列表组件，它以简洁、灵活的方式封装了列表展示逻辑，支持多种列表项布局，如文本、图标、图片等组合展示。通过uni-list，开发者可以轻松创建美观、响应式的列表界面，无需从零开始编写复杂的布局代码，大大提升了开发效率。uni-app官网uni-list 列表 - DCloud 插件市场uni-list组件的强大之处在于其高度的可定制性。除了基本的文本展示，它还支持图片、图标、开关、滑动操作等多种元素的嵌入，以及不同的布局模式（如左图右文、上下结构等）。
uniapp使用SCSS混入 封装flex布局 从此一行搞定flex
weixin_46448762的博客
03-24 1107
将上面的scss文件导入到app.vue中。最后就可以直接在全局的样式中使用了。首先定义demo.scss。
uniapp中使用scss
yigeboke的博客
02-26 2045
在项目中有几个相同的样式,比如下边的 flex 我们可以把它写成一个变量,通过混合器应用 @mixin标识符定义,下边的这段sass代码 在 uni.scss中增加如下代码: @mixin chenflex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } 然后再页面使用时再需要用到的地方这样写 .title{ width: 100%; ..
浅谈uniapp的flex布局
qq_36305027的博客
05-10 1万+
1 flex布局 ​ flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设置Flex布局也很简单直接css中，设置它的 display:flex。 1.1 flex-direction ​ 容器类元素排列方向，它有四个参数可以选择。row（从左至右）； row-reverse （从右至左）； column（从上到下）； column-reverse（从下到上）。 <template> <view style="dis
uni-app flex布局
06-11
在uni-app中使用flex布局可以通过以下步骤实现： 1. 在需要使用flex布局的组件的父元素上添加样式：display: flex。 2. 可以使用flex属性来控制子元素的布局方式。常用的flex属性包括： - flex-direction：控制子元素的排列方向，可选值有row（水平排列，默认值）、column（垂直排列）、row-reverse（水平反向排列）、column-reverse（垂直反向排列）。 - justify-content：控制子元素在主轴上的对齐方式，可选值有flex-start（起点对齐，默认值）、center（居中对齐）、flex-end（终点对齐）、space-between（两端对齐，子元素之间间隔平均分配）、space-around（子元素之间间隔平均分配，两端留有空隙）。 - align-items：控制子元素在交叉轴上的对齐方式，可选值有flex-start（起点对齐）、center（居中对齐，默认值）、flex-end（终点对齐）、stretch（拉伸对齐，子元素高度自动匹配父元素高度）、baseline（基线对齐）。 例如，以下样式将子元素在水平方向上居中对齐，垂直方向上起点对齐： ``` .container { display: flex; justify-content: center; align-items: flex-start; } ``` 3. 还可以使用flex-grow属性来控制子元素的伸缩比例，可选值为数字。默认值为0，表示子元素不伸缩。例如，以下样式将两个子元素的宽度分别设置为1和2，即宽度比例为1:2： ``` .container { display: flex; } .item1 { flex-grow: 1; } .item2 { flex-grow: 2; } ``` 通过以上步骤，就可以在uni-app中使用flex布局了。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SNiFe_Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值