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布局博大精深,还没有讲解完。这只是些基础内容,不过不积跬步无以至千里,不积小流无以成江河呀
希望大家回去自己练习一下,敲下代码练习下手感。我们下期再见!!