CSS使用flex布局自适应两列

html:	
    <view class="list">
		<view :class="['item',item.isActive ? 'item-active' : '']" v-for="(item,index) in                 
          list" :key="index">{{index}} </view>
		</view>
	</view>
css:
 .list {
							margin-top: 24rpx;
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							justify-content: flex-start;

							.item {
								margin-right: 30rpx;
								flex: 1;
								height: 120rpx;
								width: calc((100% - 30rpx) / 2);
								min-width: calc((100% - 30rpx) / 2);
								max-width: calc((100% - 30rpx) / 2);
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								background: #4E5969;
								border-radius: 8rpx;
								padding: 16rpx 0;
								box-sizing: border-box;
								margin-bottom: 24rpx;

								&:nth-child(2n) {
									// 去除第2n个的margin-right
									margin-right: 0;
								} 
						}