微信小程序 线性布局 flex

本人以前是做android的，最近根据公司要求，使用小程序开发项目。

1、利用android的思路，首先是解决布局的问题，比如 线性布局（横向、竖向），只要把这些搞明白，写一些基本的布局应该是没有什么难度 。

2、这就要说到布局中的flex了。

     1、先设置     display: flex;

     2、设置方向      flex-direction:row   横向     flex-direction:column 竖向

3、flex-direction主要就是设置方向，设置了方向之后就是设置子视图的布局方式，这里要说一下主方向和辅方向，比如横向布局他的主方向就是水平，侧方向就是垂直。  如果是竖向布局，主方向就是垂直，辅方向就是水平。

4、介绍了主方向和辅方向，下面就开始介绍justify-content（主方向）和align-items（辅方向）

     justify-content：主方向上的子元素的布局方式

        flex-start：主轴起点对齐(默认值)
        flex-end：主轴结束点对齐
        center：在主轴中居中对齐
        space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
        space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同

     align-items:辅方向上的子元素的布局方式

        stretch 填充整个容器，当元素未设置侧轴方向的长度时，充满父元素，如设置了侧轴方向长度，则以子元素设置的长度为准(默认值)
        flex-start 侧轴的起点对齐 （这里我们手动设置下子 view 的高度，来看的明显一些）
        flex-end 侧轴的终点对齐
        center 在侧轴中居中对齐
        baseline 以子元素的第一行文字对齐

5、最后说一下关于内容超过之后的处理方式

     flex-wrap：用于控制子元素 是否换行
        nowrap：不换行（默认）
        wrap：换行
        wrap-reverse：换行，第一行在最下面

下面两个简单的水平布局、垂直布局

.horizontal{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.vertical{
  display: flex;
  flex-direction: column;
}

总结：基本上了解上面的知识就可以对一些线性布局进行开发。感觉还是比较简单。