小程序学习总结（选择器、position、Flex）

类选择器

选择器	示例	描述	如何引用
.class	.myClass	类选择器	在wxml中class = "myClass"引用
#id	#my_view	id选择器	无需在wxml中引用，会找到该id并使用该样式
image	image	element选择器	无需再wxml中引用，会修改所有image元素的样式

1、选择器还可以继承，如在myClass下，再写一个childClass样式，会覆盖父类已有的属性，两者属性为叠加的形式。

2、想申明某一个区块内的所有元素的样式，如myClass image：这样myClass下的所有image元素的样式均使用该样式。

布局方式（position）

属性	描述
static	默认值，排列方式为代码先后顺序，先来先排，后来后排
relative	在原有位置的基础上，做相对位置的位移，保留原始位置（通过top、right、bottom、left修改位置）
absolute	在原有位置的基础上，做绝对位移，不保留原始位置（通过top、right、bottom、left修改位置）
fixed	在当前窗口基础上，放哪都可以

Flex（弹性布局）

1、使用：display: flex

2、属性分为父容器属性和子项目属性

父容器

属性	描述
flex-direction	指定内容item如何排列，常用row、column，默认row
flex-wrap	内容item如何换行，默认no-wrap（不换行），即所有元素都排列在第一行
justify-content	内容item在主轴上的对齐方式
align-item	定义项目在交叉轴上如何对齐
align-content	定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

子item

属性	描述
order	项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow	定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink	定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis	定义了在分配多余空间之前，项目占据的主轴空间（mainsize）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
align-self	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性

Flex属性比较多，具体可见"参考链接"

参考链接

Flex详解

Flex Demo（推荐这个，可以自己尝试下修改参数样式会如何改变）

小程序wxss样式简表