小程序学习（二）

如何实现合理布局

参考链接：https://www.runoob.com/css3/css3-flexbox.html

在制作小程序的过程中，我们可能会需要对多个页面来进行设计，这是一个很繁琐的过程，这个时候就需要用到弹性盒子来帮助我们实现我们想要的效果。

我们在视图文件下进行代码编写，代码如图：

实现效果是这样的：

1.传统方式的实现：
我们需要在页面样式文件中对页面样式进行设置：

实现效果：

尽管传统方式也能实现我们想要的布局，但是它存在两个缺点：
(1)布局目标的实现属性赋值很分散
(2)严重依赖页面结构与内容实际大小

2.应用弹性盒子实现
弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

同样，我们需要对样式文件进行设置，如图：

flex-direction：column：纵向排列。
justify-content：space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

弹性盒子实现效果与传统方式的实现效果是一致的，这里就不做展示了。