写uni-app时用到的Flex布局

最近刚写完一套小安卓app项目，原生安卓实在太难写了，所以来研究研究uni-app。

uni-app是一套代码可打包为多种程序，因此要保证这一套代码能适配多平台。（据说一套代码能上线安卓app、IOSapp、微信小程序、QQ小程序等一大堆平台）

所以啊，官方也推荐写界面的时候用flex布局，能很大程度上适配多个平台。

之前写界面很少用到flex，感觉用不太明白，所以今天又回来研究了。

简单看了看官方给的模板里，就是用到了弹性布局的例子，自己也试着写了一下，感觉悟了，这不就是Android的布局文件里的线性布局吗！

相同效果，他俩可以分别这么写↓

Android：

android:orientation="vertical"    <!--竖直方向线性布局-->
android:gravity="left"    <!--水平方向靠左-->

Flex：

flex-direction: column; /*垂直方向排列*/
justify-content: flex-start; /*水平方向靠左*/

其实这俩段在写布局的时候作用一样，在Flex里只是换了个词：

flex-direction     /*决定水平或垂直方向排列*/
align-items        /*决定纵轴对齐方式*/
justify-content    /*决定横轴对齐方式*/

--------------------------------------------------

理解完了自己写一段试试：

template部分

<view class="content">
	<view class="v1">
		<view class="v2">
			<view class="v3">
			</view>
			<view class="v4">
			</view>
		</view>
	</view>
</view>

css部分

.v1{
	height: 200px;
	display: flex;
	justify-content: flex-end;	/*水平方向靠右*/
	align-items: flex-end; /*垂直方向在下*/
	background-color: #4CD964;
}
.v2{
	width: 200px;
	height: 100px;
	display: flex;
	flex-direction: column; /*垂直方向排列*/
	align-items: flex-start;/*垂直方向在上*/
	justify-content: flex-start;/*水平方向靠左*/
	background-color: #007AFF;
}
.v3{
	width: 100px;
	height: 50px;
	background-color: #ffaaff;
}
.v4{
	width: 100px;
	height: 50px;
	background-color: #aa00ff;
}

运行结果：

--------------------------------------------

先理解到这，有问题以后再来改！

uni-app像是微信小程序和Vue项目的结合，感觉上手很简单，简单看看教程就能上手了，大家也可以试试，挺好玩的。