微信小程序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 | 定義元素的排列順序。數(shù)值越小，排列越靠前。 不依據元素本身代碼中的順序。 |
| 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)：可以根據屏幕寬度進行自適應。其規(guī)定所有屏幕寬均為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規(guī)則：
?1、rpx單位和數(shù)字中間不可以有空格
?2、表達式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(50%+5em)"這種沒有空格的寫法是錯誤的
?3、表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格
上面的計算應該寫為：
?width:calc(750rpx * 100 / 414)
三、樣式導入
wxss中直接就支持樣式導入功能，也可以和less中的導入混用。
使用@import語句可以導入外聯(lián)樣式表，只支持相對路徑。
示例：
/** 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的可以自己去了解一下。
寫在最后：
- 如果文章中有錯誤或是表達不準確的地方，歡迎大家評論中指正，以便我完善。
- 文章我也會根據所學到新的知識不斷更新。
