微信小程序第3讲--flex弹性布局基础

flex弹性布局

相信现在大家已经学会了小程序的样式设计了，并且已经理解了视图的嵌套关系，那么今天我讲一个强大的布局：flex弹性布局

什么是布局？

布局在我们日常生活中很常见，也很容易理解。比如：我们桌面的物品怎么摆放好看？书柜里的书籍怎么摆放才更容易找到？生活中一个合理的布局可以让你觉得很舒适，它带给你美感。小程序中也是如此，一个好的布局会让你感觉心旷神怡，然后爱上这款App。
先调调大家胃口，现在就展示下我做过的界面设计吧

商品展示页

商品详情页

上面的布局基本上都是依靠flex布局进行实现的，大家学习之后也会写出漂亮的UI界面出来，而且这一点美术好的更应该要有自信！！
不过在讲flex布局之前先要了解下盒子模型

盒子模型

1.水平方向的盒子

我们观察到：外部容器内嵌套三个小容器，小容器呈水平方向排列

2.竖直方向的盒子

我们发现：外部容器内嵌套三个小容器，小容器呈竖直方向排列

好了接下来我们可以讲flex布局了

flex布局

我们首先用代码实现一下上面2个盒子模型吧

1.水平盒子模型实现

index.wxml

<view class="parent">
	<view class="child" style="background:red"></view>
	<view class="child" style="background:green"></view>
	<view class="child" style="background:blue"></view>
</view>

index.wxss

.parent{
	width:200px;
	/*启用flex布局*/
	display:flex;
	/*盒子内部为水平的*/
	flex-direction:row;
}
.child{
	/*子容器占据的比例*/
	/*一共有三个子容器，1：1：1平分外部容器水平方向宽度*/
	flex-grow:1;
	height: 110px;
}

运行结果：

2.竖直方向盒子实现

index.wxml

<view class="parent">
	<view class="child" style="background:red"></view>
	<view class="child" style="background:green"></view>
	<view class="child" style="background:blue"></view>
</view>

index.wxss

.parent{
	height:200px;
	/*启用flex布局*/
	display:flex;
	/*盒子内部为水平的*/
	flex-direction:column;
}
.child{
	/*子容器占据的比例*/
	/*一共有三个子容器，1：1：1平分容器竖直方向的高度*/
	flex-grow:1;
	width: 110px;
}

运行结果：

现在我们两个模型都实现了
接下来我们综合上面所学，实现flex混合布局
我们要做出下面的效果：

3.水平竖直混合布局实现

如何实现呢？

咱们分析一下：
1.我们写一个view作为最外层容器，布局为水平盒子，水平放置两个view，水平方向比例为2:1（左面宽，右面窄）
2.在比例为1的view中设置布局为竖直盒子，竖直放置两个view，竖直方向占比1:1（竖直高度相等）

好了我们来先写视图层代码，在哪里写来着？

没错是 index.wxml

<view class="outview">
	<view class="inside_view1"></view>
	<view class="inside_view2">
		<view class="child1"></view>
		<view class="child2"></view>
	</view>
</view>

样式代码设计，在哪里写来着？

没错是 index.wxss

.outview{
	width:200px;
	display:flex;
	/*方向为水平*/
	flex-direction:row;
}
.inside_view1{
	/*占的权重为2*/
	flex-grow:2;
	height:120px;
	/*背景色设置*/
	/*cyan为青蓝色*/
	background:cyan;
}
.inside_view2{
	/*占的权重为1*/
	flex-grow:1;
	height:120px;
	/*启用flex布局*/
	display:flex;
	/*竖直方向*/
	flex-direction:column;
}
.child1{
	/*背景色设置*/
	background:green;
	flex-grow:1;
}
.child2{
	/*背景色设置*/
	background:yellow;
	flex-grow:1;
}

运行结果：

flex基础我们就讲解完了
现在你再来看看这个设计图：

你是不是有点眉目了？
不过flex布局博大精深，还没有讲解完。这只是些基础内容，不过不积跬步无以至千里，不积小流无以成江河呀
希望大家回去自己练习一下，敲下代码练习下手感。我们下期再见！！