小程序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 点赞

作者：达叔小生
链接：https://www.jianshu.com/p/90363323c91b