小程序flex布局
标题图
小程序开发规范
在学习小程序时，规范是特别重要的。
目录的规范，所有组件要放在components目录下，所有图片要放在images目录下，模型文件时用于编写各类业务的模型，需要放在models文件下。
在wxml中如果可以单独出现的标签就单独出现，每行代码不要太多，要适当换行等。要进行适当的注解说明。
在css中我们会用到rpx和px，我们会傻傻分不清楚到底用的是哪一个？通常情况建议间距用rpx，而字体大小，边框使用px。
flex布局-block，inline，inline-block
display的默认值为block，为块状值。inline为行内元素，inline是不可以设置高和宽的，注意哦~如果想要就可以变为inline-block，就可以设置高和宽了。
flex 为弹性盒子，弹性元素放到块状元素时就。flex-direction:row为水平排布，flex-direction: column为垂直排列。flex-direction:row-reverse，为水平的倒序，颠倒后变右边了，flex-direction:column-reverse为列的倒序，没有出现水平的情况，还是在上边。如果没有容器没有设置高度的话，高度是自适应的，但是如果你给高度设置多余的高度，它还是会偏移的，还是会向下偏移的。
justify-content: flex-start; justify-content: flex-end; 如果有reverse属性，就会导致flex-start无反应，而justity-content:flex-end就会有反应，反而不是向下而是向上置顶。
图片
效果
图片
效果
一般向上对齐是justify-content:flex-start;，而向下对齐是justify-content:flex-end;而对于水平，向左对齐为justify-content:flex-start;，向右对齐为justify-content:flex-end;。
如果有flex-direction: column-reverse;，中有reverse起了作用，导致justify-content: flex-start;不起作用，反而justify-content:flex-end;起了作用。
justify-content: center;为显示居中。
display: flex;
flex-direction: row-reverse;
justify-content: center;
height: 300px;
效果
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
效果
justify-content: space-between;
space-between平均分布的效果。
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
效果
justify-content: space-around;
均相等，每个子项上下均相等。
display: flex;
flex-direction: column;
justify-content: space-around;
效果
justify-content: space-between;
justify-content: space-around;
justify-content: center;
justify-content: flex-start;
justify-content: flex-end;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
效果
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
效果
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
效果
flex-direction: row-reverse;
justify-content: center;
justify-content: flex-end;
justify-content: flex-start;
justify-content: space-around;
justify-content: space-between;
align-items: baseline;
align-items: center;
align-items: flex-end;
align-items: flex-start;
align-items: stretch;
align-items: stretch;在没有给高度的时候，会与背景拉升同高度。
效果
align-items: baseline;基线
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap
justify-content: center;
align-items: flex-start;
往后余生，唯独有你
简书作者：达叔小生
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞
