<template>
	<view>
		<!-- 顶部 -->
		<view class="uni-head">
			<view class="uni-head-title">
				view区域滚动视图
			</view>			
		</view>
		 <view class="container">
		        <view class="uni-title uni-common-mt">
		            flex-direction: row
		            <text>\n横向布局</text>
		        </view>
		        <view class="uni-flex uni-row">
		            <view class="flex-item uni-bg-red">A</view>
		            <view class="flex-item uni-bg-green">B</view>
		            <view class="flex-item uni-bg-blue">C</view>
		        </view>
		        <view class="uni-title uni-common-mt">
		            flex-direction: column
		            <text>\n纵向布局</text>
		        </view>
		        <view class="uni-flex uni-column">
		            <view class="flex-item flex-item-V uni-bg-red">A</view>
		            <view class="flex-item flex-item-V uni-bg-green">B</view>
		            <view class="flex-item flex-item-V uni-bg-blue">C</view>
		        </view>
				<div>
					
				</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	@import url(../../lib/smart.css);
	.flex-item{
		width: 33.3%;
		height: 200rpx;
	}
	.uni-row{
		/* display: flex; */
		flex-direction: row;
	}
	.uni-column{
		/* display: flex; */
		flex-direction: column;
	}
	.flex-item-V{
		width: 100%;
	}
</style>
