最近在看微信小程序的文档 ，因为小腾讯推荐小程序使用flex布局方式
但关于flex 布局能找到的教程实在太少
于是乎决定自己动手一个个试验一遍
一：首先 flex 是动态的 当设置的主轴不同时 justify-content 跟 align-items代表的含义是不一样的
二：justify-content 的flex-start ，flex-end 跟 align-items的 flex-start ，flex-end 是不一样的
三：需要注意的是justify-content 属性没有stretch这个值
而align-items可以设置为stretch 让元素自动占满空白位置
四：justify-content可以设置为space-around 或者space-between 控制元素之间的空隙
而align-items没有这个选项
五：按九宫格的分布方式
即当flex-direction为row时(注意justify-content与align-items需要写在盒子的样式里，而不是要布局的对象样式里)
1.justify-content:flex-start; align-items:flex-start;为左上角
2.justify-content:center; align-items:flex-start;为中上位置
3.justify-content:flex-end; align-items:flex-start;为右上角
4.justify-content:flex-start; align-items:center;为左中位置
5.justify-content:center; align-items:center;为垂直居中位置
6.justify-content:flex-end; align-items:center;为右中位置
7.justify-content:flex-start; align-items:flex-end;为左下角
8.justify-content:center; align-items:flex-end;为中下位置
9.justify-content:flex-end; align-items:flex-end;为右下角
六: 注意align-self 的用法:
align-self 能控制对象在flexBox 内的位置
如align-self : flex-end; 使对象排在最后
注意:justify-content 和 align-items 都是作用于 盒子内的所有对象
而不是对象本身,要控制对象在盒子内的位置 使用align-self;
flex-flow有两个值
第一个是flex-direction 决定主轴的方向可选值有4个
1：row 从左到右排列 row-resever 就是从右到左排列
当主轴设置为row时
这时候 justify-content 影响的就是盒子内子元素与主轴平行时的分布(就是控制对象左右移动)
justify-content 属性的flex-start 就是在最左边 flex-end 就是在最右边，
而align-items影响的是对象与主轴垂直的分布(就是控制元素上下移动)
align-item属性的flex-start就是在最上边 flex-end 就是在最下边
2：column 从上到下排列 column-resever就是从下到上排列
这时候 justify-content 影响的就是子元素与主轴平行时的分布(就是控制子元素上下移动)
flex-start 就是在最上面 flex-end 就是在最下边，
而align-items影响的是子元素与主轴垂直的分布(就是控制元素左右移动)
align-item属性的flex-start就是在最左边 flex-end 就是在最右边
3.justify-content与align-items的使用，
1.justify-content跟随主轴方向，align-items垂直主轴方向，
即当flex-direction为row时，justify-content决定盒子内的所有对象左右移动，align-items决定盒子内的所有对象上下移动，
当flex-direction为column时则justify-content决定盒子内的对象上下移动，而align-items决定盒子内的对象左右移动，
注意：justify-content与align-items都是写在flexbox的样式里，而不是需要调整位置的对象上