uniapp初级入门-flex布局学习03-align-items属性

最新推荐文章于 2024-11-08 10:44:04 发布

虾米大王

最新推荐文章于 2024-11-08 10:44:04 发布

阅读量532

点赞数 8

分类专栏： uniapp 文章标签： uni-app 学习前端

本文链接：https://blog.csdn.net/modern358/article/details/134984086

版权

uniapp 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

本文详细解释了CSSFlexbox中的align-items属性，展示了flex-start、flex-end、center、stretch和baseline五个对齐方式的示例，以及它们在调整元素在交叉轴上的位置时的作用。

摘要由CSDN通过智能技术生成

直接上代码

<template>
	<view class="align-items">
		<view>align-items属性定义项目在交叉轴上如何对齐。</view>
		
		<view class="flex-start">
			<view class="item1 red">
				item1
			</view>
			<view class="item2 red">
				item2
			</view>
			<view class="item3 red">
				item3
			</view>
			<view class="item4 red">
				item4
			</view>
		</view>
		
		<view class="flex-end">
			<view class="item1 yellow">
				item1
			</view>
			<view class="item2 yellow">
				item2
			</view>
			<view class="item3 yellow">
				item3
			</view>
			<view class="item4 yellow">
				item4
			</view>
		</view>
		
		<view class="center">
			<view class="item1 blue">
				item1
			</view>
			<view class="item2 blue">
				item2
			</view>
			<view class="item3 blue">
				item3
			</view>
			<view class="item4 blue">
				item4
			</view>
		</view>
		
		<view class="stretch">
			<view class=" orange">
				item1
			</view>
			<view class=" orange">
				item2
			</view>
			<view class=" orange">
				item3
			</view>
			<view class=" orange">
				item4
			</view>
		</view>
		
		<view class="baseline">
			<view style="margin-top: 55rpx;">第一行文字</view>
			<view class="item1 purple">
				item1			
			</view>
			<view class="item2 purple">
				item2		
			</view>
			<view class="item3 purple">
				item3	
			</view>
			<view class="item4 purple">
				item4	
			</view>
		</view>
		
		<view>
			flex-start：交叉轴的起点对齐。
			flex-end：交叉轴的终点对齐。
			center：交叉轴的中点对齐。
			baseline: 项目的第一行文字的基线对齐。
			stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

.item1{
	width: 100rpx;
	height: 50rpx;
}

.item2{
	width: 100rpx;
	height: 100rpx;
}

.item3{
	width: 100rpx;
	height: 125rpx
}

.item4{
	width: 100rpx;
	height: 150rpx;
}

.red{
	background-color: red;
}

.yellow{
	background-color: yellow;
}

.blue{
	background-color: blue;
}

.orange{
	
	background-color: orange;
}

.purple{
	background-color: purple;
}

.flex-start{
	display: flex;
	align-items: flex-start;
	width: 100%;
	height: 200rpx;
	border: 1Px solid gray;
	box-sizing: border-box;
}

.flex-end{
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 200rpx;
	border: 1Px solid gray;
	box-sizing: border-box;
}

.center{
	display: flex;
	align-items: center;
	width: 100%;
	height: 200rpx;
	border: 1Px solid gray;
	box-sizing: border-box;
}

.stretch{
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 200rpx;
	border: 1Px solid gray;
	box-sizing: border-box;
}

.baseline{
	display: flex;
	align-items: baseline;
	width: 100%;
	height: 250rpx;
	border: 1Px solid gray;
	box-sizing: border-box;
}
</style>