uniapp初级入门-flex布局学习01

最新推荐文章于 2024-06-15 15:52:39 发布

虾米大王

最新推荐文章于 2024-06-15 15:52:39 发布

阅读量491

点赞数 9

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

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

版权

uniapp 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

本文介绍了如何在Uniapp项目中使用Flex布局，包括flex-direction属性的应用，展示了如何控制主轴方向和项目排列，并提及了代码在HBuilderX和IDEA中的应用示例。

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

Flex 布局

Uniapp为支持跨平台，框架建议使用 Flex 布局。

于是就必须学习flex布局。下面我把学习过程中的代贴出来，供大家学习参考。

项目截图我就不发了，因为这些代码都是用uniapp的工具hbuilderx建立的。你们也随便搞搞，代码能理解，就行了。学会了，也可以在其他软件工具，比如idea中使用。

<template>
	<view class="index">
		<view>flex-direction属性决定主轴的方向（即项目的排列方向）。</view>
		<view class="flex-row">
			<view class="item">
				item1
			</view>
			<view class="item">
				item2
			</view>
			<view class="item">
				item3
			</view>
		</view>		
		<view class="flex-row-reverse">
			<view class="item">
				item4
			</view>
			<view class="item">
				item5
			</view>
			<view class="item">
				item6
			</view>
		</view>
		<view class="flex-column">
			<view class="item">
				item7
			</view>
			<view class="item">
				item8
			</view>
			<view class="item">
				item9
			</view>
		</view>
		
		<hr />
		<view class="flex-column-reverse">
			<view class="item">
				itemx
			</view>
			<view class="item">
				itemy
			</view>
			<view class="item">
				itemz
			</view>
		</view>
	</view>
</template>

<script>
	export default {

	}
</script>

<style lang="scss" scoped>
 .flex-row{
	 display: flex;
	 flex-direction: row;
	 
	 .item{
		 width: 100rpx;
		 height: 100rpx;
		 background-color: red;
		 
	 }
 }
 
 .flex-row-reverse{
	 display: flex;
	 flex-direction: row-reverse;
	 
	 .item{
		 width: 100rpx;
		 height: 100rpx;
		 background-color: blue;
	 }
 }
 
 .flex-column{
	 display: flex;
	 flex-direction: column;
	 
	 .item{
		 width: 100rpx;
		 height: 100rpx;
		 background-color: yellow;
	 }
 }
 
 .flex-column-reverse{
	 
	 display: flex;
	 flex-direction: column-reverse;
	 margin-top: 100rpx;
	 .item{
		 width: 100rpx;
		 height: 100rpx;
		 background-color: orange;
	 }
 }
</style>