2021-09-24

flex 两栏布局

两栏布局

小程序

<template>
  <view class="main">
	  <view class="text"> 场景</view>
	  <view class="content" >
		  <view class="item" v-for="(item , index) in 5" :key="index"></view>
	  </view>
  </view>
</template>

.main{
	padding: 20rpx;

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

	.content{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item{
			width: calc(50% - 10rpx);
			height: 200rpx;
			background-color: red;
			margin-bottom: 20rpx;
		}
	}
}

父级view.content中设置弹性盒 display:flex，换行flex-wrap:wrap，并设置其子元素（/子项目）view.item的对齐方式 justify-content:space-between

子项目设置特定的宽，一行能占两列width:calc(50% - 10rpx)。并在底部留边距

justify-content 主轴方向上的对齐方式 .

flex-direction 设置主轴方向，默认为row （横轴）