微信小程序view支持两种布局方式：Block和Flex。所有view默认都是block。

一、Flex容器

采用Flex布局的元素，称为Flex容器(Flex container)。下面是示意图：

容器默认存在两根轴：图中水平的主轴(main axis)和垂直的交叉轴(cross axis)，flex container为flex容器，flex item为容器的元素。

1、flex容器的属性

控制容器中元素的布局。

附：属性的值

//共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元素的属性

只能在元素中使用，控制元素布局。

二、尺寸单位

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;
}

目前支持的选择器有：

五、小程序中使用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的可以自己去了解一下。

写在最后：

• 如果文章中有错误或是表达不准确的地方，欢迎大家评论中指正，以便我完善。
• 文章我也会根据所学到新的知识不断更新。