持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

实现布局方式

css的布局方式有很多，传统布局方式以前我们用的有如下： 首先是定位布局，关键词： position: fixed;固定布局，将元素固定在一个位置，不随页面移动而移动，

position: relative;相对定位，相对于元素自身定位，不脱离文档流，相当于定义一个参照物，一般和绝对定位结合使用。

position: absolute;绝对定位，脱离文档流，一般和相对定位结合使用，如果不定义相对定义，将会相对于整个浏览器定位，所以定位布局，一般情况下都是相对定位和绝对定位结合着来，相当定位相当于划定一个势力范围，制定一个封闭的容器块，然后绝对定位就行对于相对定位来定位，从而达到有效的布局。

下面我们主要讲述flex布局的实现方式。

实现2个子元素，第一个放满，第二个占满剩下的布局效果

对应的布局为

                <view class="v-flex">
			<view class="v-box-left">这是左边的元素 </view>
			<view class="v-box-right">这是右边的元素</view>
			
		</view>

	.v-flex{
		display: flex;
		flex-direction: row;		
		
	}
	.v-box-left{
		background-color: green;
		padding: 20rpx;
		color: wheat;
	}
	.v-box-right{
		background-color: red;
		padding: 20rpx;
		flex: 1;
		
	}
		

即哪个元素需要占满剩下的空间，就把对应的容器设置为flex为1。

实现2个子元素左右排列，布局平均分

            .v-flex-2{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 50rpx;
		.v-box-left-2{
			background-color: green;
			padding: 20rpx;
			color: wheat;
			flex: 1;
		}
		.v-box-right-2{
			background-color: red;
			padding: 20rpx;
			flex: 1;
			text-align: end;
			
		}
	}

这种布局就是需要设置justify-content: space-around，然后给子容器在设置一个flex:1 就能实现这样的效果了。

常用的一个居中效果

用flex实现的方式为

.v-center{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 400rpx;
		height: 400rpx;
		color: wheat;
		background-color: greenyellow;
	}

把justify-content: center;align-items: center;都设置出来就能达到这样的需求。

子容器横向排列，超过就换行

如图所示，可能存在很多子容器，我们需要设置超过一行就换行展示

    		<view class="v-flex-wrap">
			
			<view v-for="(item,index) in 20" :key="index" class="v-box">横向排列{{index}}</view>
		</view>
	.v-flex-wrap{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 50rpx;
		.v-box{
			background-color: red;
			width: 200rpx;
			height: 100rpx;
			color: white;
			margin-top: 20rpx;
			margin-left: 20rpx;
			
		}
	}

这种实现利用flex布局 的方式就非常容易实现。

总结

flex的布局还远不致于此，更多的好的效果需要在我们实际开发中去寻找，去发现。我目前能想到的一些常用的效果大概就是以上这些了。偶尔还需要flex布局结合绝对布局、相对布局去实现一些效果。