WXSS語法
WXSS和CSS：
WXSS(WeiXin Style Sheets) 具有 CSS 大部分特性。同時(shí)為了更適合開發(fā)微信小程序， WXSS 對 CSS 進(jìn)行了擴(kuò)充以及修
改。主要體現(xiàn)在兩個(gè)方面：
- 尺寸單位。
- 樣式導(dǎo)入。
rpx尺寸單位：
可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為 750rpx 篇恒。如在 iPhone6 上，屏幕寬度為 375px 凶杖，共有 750個(gè)物理像素 胁艰，則 750rpx = 375px = 750物理像素 ， 1rpx = 0.5px = 1物理像素 官卡。
樣式導(dǎo)入：
使用@import語句可以導(dǎo)入外聯(lián)樣式表蝗茁， @import 后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用 ; 表示語句結(jié)束寻咒。示
例代碼如下：
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
微信官方文檔請參考：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
flex布局：
flex 布局是繼 標(biāo)準(zhǔn)流布局 哮翘、 浮動布局 、 定位布局 后的第四種布局方式毛秘。這種方式可以非常優(yōu)雅的實(shí)現(xiàn)子元素居中或
均勻分布饭寺，甚至可以隨著窗口縮放自動適應(yīng)阻课。 flex 布局在瀏覽器中存在一定的兼容性（具體參
考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7
）。但是在小程序中艰匙，是完全兼容 flex 布局的限煞，并且微信官方也是推薦使用 flex 布局的。下面就來詳細(xì)的講下 flex 布局:
一個(gè)小例子：
看以下代碼：
<view class='outter'>
<view class='inner'>1</view>
<view class='inner'>2</view>
</view>
.outter{
display: flex;
justify-content: space-between;
width: 300px;
height: 200px;
background: pink;
}
.outter .inner{
background: gray;
width: 100px;
height: 100px;
}
基本概念：
- 彈性容器：包含著彈性項(xiàng)目的父元素员凝。通過設(shè)置 display 屬性的值為 flex 或 inline-flex 來定義彈性容器署驻。
- 彈性項(xiàng)目(Flex item)：彈性容器的每個(gè)子元素都稱為彈性項(xiàng)目叶圃。彈性容器直接包含的文本將被包覆成匿名彈性
項(xiàng)目历恐。也可以稱為子容器。 - 軸(Axis)：每個(gè)彈性框布局包含兩個(gè)軸肠缔。彈性項(xiàng)目沿其依次排列的那根軸稱為主軸(main axis)糖埋。垂直于主軸的
那根軸稱為側(cè)軸(cross axis)宣吱。 - 方向(Direction)：可以通過 flex-direction 來確定主軸和側(cè)軸的方向。
設(shè)置在主軸上的排列方式(justify-content)：
默認(rèn)情況下瞳别，主軸的方向是從左到右征候。在主軸方向上，可以通過 justify-content 屬性來設(shè)置他們的排列方式祟敛。排列
方式有以下幾種：
-
1.flex-start ：項(xiàng)目靠近父盒子的左側(cè)疤坝。默認(rèn)采用的就是這種排列方式。示例圖如下：
image.png -
2.flex-end ：項(xiàng)目靠近父盒子的右側(cè)：
image.png -
3.center ：所有項(xiàng)目會挨在一起在父盒子的中間位置：
image.png -
4.space-around ：項(xiàng)目沿主軸均勻分布馆铁，位于首尾兩端的子容器到父容器的距離是子容器間距的一半卒煞。
image.png -
5.space-between ：項(xiàng)目沿主軸均勻分布，位于首尾兩端的子容器與父容器緊緊挨著叼架。
image.png -
6.space-evenly ：項(xiàng)目在主軸上均勻分布，收尾兩端的自容器到父容器的距離跟自容器間的間距是一樣的衣撬。
image.png
設(shè)置在側(cè)軸上的排列方式( align-items )：
默認(rèn)情況下乖订，側(cè)軸的方向是從上到下。在側(cè)軸方向上具练，可以通過 align-items 屬性來設(shè)置他們的排列方式乍构。排列方
式有以下幾種：
-
1.flex-start ：起始端對齊。默認(rèn)就是這種對齊方式扛点。
image.png -
2.flex-end ：末尾段對齊
image.png -
3.center ：中間對齊哥遮。
image.png - 4.stretch ：如果項(xiàng)目沒有設(shè)置高度。那么子容器沿交叉軸方向的尺寸拉伸至與父容器一致陵究。比如我們
將 .inner 的高度屬性去掉眠饮，代碼如下：
.outter .inner{
background: gray;
width: 100px;
/* height: 100px; */
border: 1px solid #ccc;
}
效果圖為：
- 5.baseline ：基線對齊，這里的 baseline 默認(rèn)是指首行文字铜邮，所有子容器向基線對齊仪召，交叉軸起點(diǎn)到元素基線
距離最大的子容器將會與交叉軸起始端相切以確定基線寨蹋。比如我們把代碼改成如下：
<view class='outter'>
<view class='inner'>
<view style='margin-top:10px;background:#eee;'>hello</view>
</view>
<view class='inner'>2</view>
</view>
然后 wxss 文件為：
.outter{
display: flex;
align-items: baseline;
width: 300px;
height: 200px;
background: pink;
}
那么效果圖為：
更換主軸和側(cè)軸方向(flex-direction)
主軸默認(rèn)的方向是從左到右，側(cè)軸的方向默認(rèn)是從上到下扔茅，當(dāng)然也可以進(jìn)行修改已旧。可以通過 flex-direction 進(jìn)行修
改召娜≡送剩可以修改的參數(shù)為以下：
- row ：默認(rèn)屬性。從左到右玖瘸。
-
2.row-reverse ：從右到左秸讹。
image.png -
3.column ：從上到下。
image.png -
4column-reverse ：從下到上店读。
image.png
換行(flex-wrap):
默認(rèn)情況下嗦枢，元素個(gè)數(shù)如果超過一定數(shù)量，那么在一行當(dāng)中就排列不下屯断。此時(shí) flex 默認(rèn)的處理方式是壓縮元素文虏，
使其能在一行中排列下來。比如以下代碼：
view class='outter'>
<view class='inner'>1</view>
<view class='inner'>2</view>
<view class='inner'>3</view>
<view class='inner'>4</view>
</view>
.outter{
display: flex;
width: 300px;
height: 200px;
background: pink;
}
.outter .inner{
background: gray;
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
那么會把這四個(gè)元素?cái)D壓在一行中殖演。即使給元素設(shè)置了寬度也沒有用的氧秘。效果圖如下：
以通過 flex-wrap 來改變排列的方式∨烤茫可以設(shè)置的屬性如下：
-
1.nowrap ：不換行丸相。默認(rèn)的。
image.png -
2wrap ：換行
image.png -
3wrap-reverse ：換行彼棍，但是第一行會在下面灭忠。
image.png
align-content屬性
在排列中，如果有多行座硕，那么這個(gè)屬性是設(shè)置多行之間的排列方式弛作。可以通過 align-content 屬性來確定排列的方
式华匾∮沉眨可以設(shè)置以下值。
- flex-start ：從上往下排列蜘拉。示例代碼如下：
.outter{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 300px;
height: 300px;
background: pink;
}
-
2.flex-end ：末尾段對齊萨西。效果圖如下：
image.png -
3.center ：中點(diǎn)對齊。效果圖如下：
image.png -
4 space-between ：與交叉軸兩端對齊旭旭，軸線之間的間隔平均分布谎脯。效果圖如下：
image.png
5.space-around ：每根軸線兩側(cè)的間隔都相等。所以您机，軸線之間的間隔比軸線與邊框的間隔大一倍穿肄。效果圖如
下：
image.png - 6.stretch ：默認(rèn)方式年局，如果沒有給元素設(shè)置高度，那么會占滿整個(gè)交叉軸咸产。
.outter .inner{
background: gray;
width: 100px;
/* height: 100px; */
border: 1px solid #ccc;
box-sizing: border-box;
}
效果圖如下：
元素（子容器）的相關(guān)屬性
flex-basis：
定義了在分配多余空間之前矢否，項(xiàng)目占據(jù)的主軸空間，瀏覽器根據(jù)這個(gè)屬性脑溢，計(jì)算主軸是否有多余空間僵朗。
.item {
flex-basis: <length> | auto;
}
默認(rèn)值：auto，即項(xiàng)目本來的大小, 這時(shí)候 item 的寬高取決于 width 或 height 的值屑彻。
當(dāng)主軸為水平方向的時(shí)候验庙，當(dāng)設(shè)置了 flex-basis，項(xiàng)目的寬度設(shè)置值會失效社牲，flex-basis 需要跟 flex-grow 和 flex-
shrink 配合使用才能發(fā)揮效果粪薛。
當(dāng) flex-basis 值為 0 時(shí)，是把該項(xiàng)目視為零尺寸的搏恤，故即使聲明該尺寸為 140px违寿，也并沒有什么用。
當(dāng) flex-basis 值為 auto 時(shí)熟空，則跟根據(jù)尺寸的設(shè)定值(假如為 100px)藤巢，則這 100px 不會納入剩余空間。
flex-grow：
設(shè)置元素是否需要擴(kuò)大的比例息罗。默認(rèn)值為0掂咒，即如果存在剩余空間，也不放大迈喉。比如有以下代碼：
<view class='outter'>
<view class='inner inner1'>1</view>
<view class='inner inner2'>2</view>
</view>
wxss代碼為：
.outter{
display: flex;
width: 300px;
height: 300px;
flex-wrap: wrap;
background: pink;
}
.outter .inner{
background: gray;
width: 100px;
height: 100px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.outter .inner1{
flex-grow: 2;
}
.outter .inner2{
flex-grow: 1;
}
因?yàn)閮蓚€(gè)元素分別占了2份绍刮，1份，所以第一個(gè)元素是占據(jù)了整個(gè)容器寬度的2/3挨摸，第二個(gè)元素占據(jù)了整個(gè)容器寬度
的1/3录淡。
另外，如果設(shè)置 flex-grow 為0油坝，那么他的寬度將會保持為設(shè)置的寬度，如果寬度沒有設(shè)置刨裆，那么將根據(jù)他的子元素
來保留寬度澈圈。假如代碼為：
<view class='outter'>
<view class='inner inner1'>1</view>
<view class='inner inner2'>2</view>
</view>
wxss代碼為：
.outter .inner1{
flex-grow: 0;
}
.outter .inner2{
flex-grow: 1;
}
如果把 inner1 的 width 刪掉，那么效果圖為：
flex-shrink屬性：
定義了項(xiàng)目的縮小比例帆啃，默認(rèn)為1瞬女，即如果空間不足，該項(xiàng)目將縮小努潘。比如有以下代碼：
<view class='outter'>
<view class='inner inner1'>1</view>
<view class='inner inner2'>2</view>
<view class='inner'>3</view>
<view class='inner'>4</view>
</view>
wxss的代碼如下：
.outter{
display: flex;
width: 300px;
height: 300px;
background: pink;
}
.outter .inner{
background: gray;
width: 100px;
height: 100px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.outter .inner2{
flex-shrink: 0;
}
因?yàn)榻o inner2 設(shè)置了 flex-shrink 為0诽偷，所以即使在空間不夠的情況下坤学，他也不會被壓縮。
flex屬性：
flex屬性是 flex-grow flex-shrink flex-basis 三個(gè)屬性的簡寫报慕。假設(shè)以上三個(gè)屬性同樣取默認(rèn)值深浮，則 flex 的默認(rèn)值
是 0 1 auto 。
關(guān)于 flex 的取值眠冈，有以下幾種方式：
- auto ：等價(jià)于 1 1 auto 飞苇。也就是允許增長，允許縮小蜗顽，寬度為自動布卡。
- none ：等價(jià)于 0 0 auto 。也就是不允許增長雇盖，不允許縮小忿等，寬度為自動。
- 非負(fù)數(shù)字：這個(gè)數(shù)字表示的是 flex-grow 的值崔挖， flex-shrink 為1贸街，表示允許縮小， flex-basis 為0%虚汛∝依耍可以認(rèn)為
他就是把剩余的空間進(jìn)行填充。比如以下代碼是等價(jià)的：
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
4.0 ：對應(yīng)的三個(gè)值分別為 0 1 0% 卷哩。比如以下代碼是等價(jià)的：
.item {flex: 0;}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;
}
5.長度或者百分比：則這個(gè)值視為 flex-basis 的值蛋辈，而 flex-grow 為1， flex-shrink 為1将谊。比如以下代碼是等價(jià)
的：
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
- 兩個(gè)非負(fù)數(shù)字：分別視為 flex-grow 和 flex-shrink 的值冷溶， flex-basis 取 0% ，如下是等同的：
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
- 一個(gè)非負(fù)數(shù)字和一個(gè)長度或百分比：則分別視為 flex-grow 和 flex-basis 的值尊浓，flex-shrink 取 1逞频，如下是等同
的：
.item {flex: 11 32px;}
.item {
flex-grow: 11;
flex-shrink: 1;
flex-basis: 32px;
}
更多關(guān)于flex布局請參考：
