小程序布局

小程序布局篇

从初始小程序以来，有半年时间了，一直都是摸索着前进，项目已经成型，以后会一点点记录下，做小程序以来趟过得坑，和一些技术的实现。

小程序布局标签介绍

小程序的标签相对于HTML来说布局相对简单，不在需要div , 主要标签做到了很好的手机端兼容，也是小程序主要的布局需要：

1. 快速上手
   第一眼看到小程序的API，眼花缭乱，根本不知道从何下手，其实想要快速了解布局很容易，在这里我们把平时在HTML里面布局用的
   标签想象成小程序里面的，这样想理解起来就会容易很多，除了标签的名字不一样，基本的样式配置都是和
   大同小异的。

布局方式

在小程序里面只要了解三个代码，页面的布局和构建基本就够用了。
1.flex-direction：（主要用于父级的view样式）
这个代码有三个属性，

水平布局属性：

(1).row //这个属性的意思就是从左向右排列。（左对齐）
(2).row-reverse //这个属性的意思是从右向左对齐（右对齐）

垂直布局属性：

(1).column//主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）
(2).column-reverse：//这个属性的正好与column相反

2.display:flex(主要用于子级的view样式，只有在父级用了flex-direction才会生效)

3.justify-content：（主要用于view的对齐方式）分为以下5种对齐方式

(1).flex-start（默认值）：左对齐
(2).flex-end：右对齐
(3).center： 居中
(4).space-between：两端对齐，项目之间的间隔都相等。
(5).space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

以三个代码，基本能满足大部分，小程序布局的需求了，很简单，也很实用，这是我布局用的最多的方法。都是样式，只要记住了，使用起来并不是很难，如果有特殊复杂的布局方式，就要开动大家的小脑袋瓜好好的想一想了，当然小程序的 API也提供了其他的多重化布局方式，如有需要可以自行去了解。