微信小程序view支持两种布局方式：Block和Flex。所有view默认都是block。
一、Flex容器
采用Flex布局的元素，称为Flex容器(Flex container)。下面是示意图：
容器默认存在两根轴：图中水平的主轴(main axis)和垂直的交叉轴(cross axis)，flex container为flex容器，flex item为容器的元素。
1、flex容器的属性
控制容器中元素的布局。
| 属性名 | 默认值 | 作用 |
|---|---|---|
| flex-direction | row | 决定主轴的方向，既元素的排列方向 |
| flex-wrap | nowrap | 决定元素如何换行(当元素排列不下时) |
| flex-flow | row nowrap | flex-direction和flex-wrap的简写形式 |
| justify-content | flex-start | 元素在主轴上的对齐方式 |
| align-items | stretch | 元素在交叉轴的对齐方式 |
| align-content | stretch | 多根轴线时的对齐方式 |
附：属性的值
//共6个属性，每个属性包含若干值
#flex-direction：
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上端。
column-reverse：主轴为垂直方向，起点在下端。
#flex-wrap：
nowrap（默认值）：不换行，在一行内显示所有元素，元素宽会变小。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
#flex-flow：由flex-direction和flex-wrap的值共同控制
row nowrap（默认）：主轴水平，起点在左端，不换行。
#justify-content：
flex-start（默认值）：左对齐。
flex-end：右对齐。
center： 居中。
space-between：两端对齐，元素之间的间隔都相等。即最左边的元素紧靠左边起点，最右边紧靠右边起点。
space-around：每个元素两侧的间隔相等。所以，元素之间的间隔比元素边框的间隔大一倍。
#align-items：
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 元素的第一行文字的基线对齐。
stretch（默认值）：如果元素未设置高度或设为auto，将占满整个容器的高度。
#align-content：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
2、flex元素的属性
只能在元素中使用，控制元素布局。
| 属性名 | 默认值 | 作用 |
|---|---|---|
| order | 0 | 定义元素的排列顺序。数值越小，排列越靠前。 不依据元素本身代码中的顺序。 |
| flex-grow | 0 | 当有多余空间时，元素的放大比例。 默认值0为不放大，1：1则各占整体的1/2，1：2则占1/3和2/3。 |
| flex-shrink | 1 | 当空间不足时，元素的缩小比例。如果为0，则不缩小。 |
| flex-basis | auto | 元素在主轴上占据的空间。默认值为元素本来大小 |
| flex | 0 1 auto | grow、shrink和basis的缩写 |
| align-self | auto | 自定义元素的对齐方式，可覆盖align-items属性。 值：auto | flex-start | flex-end | center | baseline | stretch 默认值为auto，表示继承父元素的align-items属性 如果没有父元素，则等同于stretch。 |
二、尺寸单位
rpx(responsive pixel)：可以根据屏幕宽度进行自适应。其规定所有屏幕宽均为750rpx。
以
iphone6为例：
iphone6屏幕宽度为375px，共有750个物理像素
则:750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。
计算公式：
1px = (750rpx / pageWidth-PX)
即：在iphoneXR(414*896)的页面中，设计稿中100px的宽度就应该是：
rpx为单位的宽度：100 * (750rpx / 414)
calc属性：css和wxss都支持的一个属性
对于上面的宽度的计算在css和wxss中使用width:100 * (750rpx / 414)的写法时错误的，不支持这种写法，这个时候就可以使用calc来解决这个问题。
calc规则：
1、rpx单位和数字中间不可以有空格
2、表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(50%+5em)"这种没有空格的写法是错误的
3、表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格
上面的计算应该写为：
width:calc(750rpx * 100 / 414)
三、样式导入
wxss中直接就支持样式导入功能，也可以和less中的导入混用。
使用@import语句可以导入外联样式表，只支持相对路径。
示例：
/** style.wxss **/
.small-p {
padding:5px
}
/** app.wxss **/
@import "../style.wxss";
//此文件中样式就有了上面的
//.small-p {
//padding:5px
//}
四、选择器
注意小程序中不支持通配符*，下面代码无效：
*{
margin:0;
}
目前支持的选择器有：
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .class | .example | 选择所有拥有class="example"的标签 |
| #id | #example | 选择所有id="example"的标签 |
| element | view | 选择所有view标签 |
| element,element | view,checkbox | 选择所有的view标签和checkbox标签 |
| nth-child(n) | view:nth-child(n) | 选择某个索引的标签 |
| ::after | view::after | 在view标签后边插入内容 |
| ::before | view::before | 在view标签前边插入内容 |
五、小程序中使用less
以vs code编辑器为例：
1、安装插件esay less
2、在vs code的设置中加入如下配置：
"less.compile":{
"outExt": ".wxss"
}
3、在需要编写样式的地方，新建less文件，然后正常编辑即可
例如：编辑好less文件index.less
/* index.less */
/* 定义less变量color */
@color:red;
/*在view样式中通过@color使用 */
view{
color:@color;
}
这个时候会帮你生成一个index.wxss文件，里面的内容就是：view{color:red;}。
使用less可以写嵌套样式，这样会直观一点，具体还视个人而定，具体关于less的可以自己去了解一下。
写在最后：
- 如果文章中有错误或是表达不准确的地方，欢迎大家评论中指正，以便我完善。
- 文章我也会根据所学到新的知识不断更新。
网友评论