03小程序的WXSS 和 flex 布局

本文轉載自查看原文 2020-02-04 21:32 927 miniprogram

WXSS和CSS：

WXSS(WeiXin Style Sheets)具有CSS大部分特性。同時為了更適合開發微信小程序，WXSS對CSS進行了擴充以及修改。主要體現在兩個方面：

1, 尺寸單位。
2, 樣式導入。

rpx尺寸單位：

可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

設備	rpx換算px (屏幕寬度/750)	px換算rpx (750/屏幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

樣式導入：

使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用；表示語句結束。示例代碼如下：

使用模板的時候，使用@import 進行導入，

flex 布局：

flex布局是繼 標准流布局、浮動布局、定位布局 后的第四種布局方式。

這種方式可以非常優雅的實現子元素居中或均勻分布，甚至可以隨着窗口縮放自動適應。

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布局的。下面就來詳細的講下flex布局。

一個小例子：

不使用flex 布局：

使用flex 布局：

補充： 為了使邊框的寬度隱藏在 width 和 height 中，可以使用一個屬性 box-sizing = border-box;

flex 布局基本概念：

1，彈性容器：包含着彈性項目的父元素。通過設置 display 屬性的值為 flex 或 inline-flex 來定義彈性容器。

外面的一個盒子被我們用display 設置為 flex ，那么這個盒子就成了彈性容器

2，彈性項目(Flex item)：彈性容器的每個子元素都稱為彈性項目。彈性容器直接包含的文本將被包覆成匿名彈性項目。也可以稱為子容器。

處在彈性容器中的子元素就是彈性項目，

3，軸(Axis)：每個彈性框布局包含兩個軸。

彈性項目沿其依次排列的那根軸稱為主軸(main axis)。

垂直於主軸的那根軸稱為側軸(cross axis)。

一般情況下，主軸就是從左到右，側軸是 從上到下

4，方向(Direction)：可以通過flex-direction來修改主軸和側軸的方向。

flex 布局之主軸上的排列方式（在盒子的 wxss中寫）：

默認情況下，主軸的方向是從左到右。在主軸方向上，可以通過justify-content屬性來設置他們的排列方式。排列方式有以下幾種：

flex 布局之側軸上的排列方式（在盒子的 wxss中寫）：

默認情況下，側軸的方向是從上到下。在側軸方向上，可以通過align-items屬性來設置他們的排列方式。排列方式有以下幾種：

此時，可以使用 baseline 對齊方式，

如下：

效果如下：

總結：

flex 布局之修改主軸方向(在外面盒子的wxss 文件中寫)：

主軸默認的方向是從左到右，側軸的方向默認是從上到下，當然也可以進行修改。

可以通過flex-direction進行修改。可以修改的參數為以下：

flex 布局之換行（在外面盒子的wxss 文件中寫）：

默認情況下，元素個數如果超過一定數量，那么在一行當中就排列不下。此時flex默認的處理方式是壓縮元素，使其能在一行中排列下來。

如果我們不想讓它執行默認操作，當放不下的時候，換到下一行去，就可以通過flex-wrap 來改變排列的方式，（其實默認的flex-wrap :是nowrap

flex 布局之align-content 屬性（在外面盒子的wxss 文件中寫）：

在排列中，如果有多行，那么這個屬性是設置多行之間的排列方式。可以通過align-content屬性來確定排列的方式。可以設置以下值。

默認的方式是 stretch !!!

總結：

around 中間間距是左右的兩倍， between 是左右靠邊，中間等距， evenly是左右，中間都是等距，

flex 布局之元素相關的屬性設置之 flex-basis （在元素中的wxss 中使用）：

上面的flex 布局都是關於外面盒子的，下面看里面元素有什么可以設置的屬性，

flex-basis 如果設置了，那么計算空間的時候，就會排除這一塊的長度，

默認值：auto，即項目本來的大小, 這時候 item 的寬高取決於 width 或 height 的值（主軸為水平時取width 主軸為垂直時取height ）。

當主軸為水平方向的時候，當設置了 flex-basis，項目的寬度設置值會失效，

當主軸為垂直方向的時候，當設置了 flex-basis，項目的高度設置值會失效

當 flex-basis 值為 0 時，是把該項目視為零尺寸的，故即使聲明該尺寸為 140px，也並沒有什么用。
當 flex-basis 值為 auto 時，則跟根據尺寸的設定值(假如為 100px)，則這 100px 不會納入剩余空間。

flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能發揮效果。

flex 布局之元素相關的屬性設置之 flex-grow （在元素中的wxss 中使用）：

設置元素是否需要擴大的比例。默認值為0，即如果存在剩余空間，也不放大。可以設置為1，

flex 布局之元素相關的屬性設置之 flex-shrink（在元素中的wxss 中使用）：

定義了項目的縮小比例，默認為1，即如果空間不足，該項目將自動縮小。

可以通過設置flex-shrink 為0 不讓它縮小，

這里的第一個就不會縮小了，其他的元素照常縮小，

flex 布局之元素相關的屬性設置之 flex屬性（在元素中的wxss 中使用）：

如何給 input 標簽中的占位文字修改樣式，

要通過 placeholder-class 屬性加上一個類：

支付寶首頁布局案例：

代碼：

 1 <view> 
 2   <view class="top">
 3     <view class="search-group">
 4       <input placeholder-class="ph-class"  placeholder="螞蟻花唄"></input>
 5       <view><image src="/images/01.png"></image></view>
 6       <view><image src="/images/02.png"></image></view>
 7 
 8     </view>
 9     <view class="main-menu">
10       <view> 
11         <image src="/images/1.png"></image>
12         <text>掃一掃</text>
13       </view>
14      <view> 
15         <image src="/images/2.png"></image>
16         <text>付錢</text>
17       </view>
18      <view> 
19         <image src="/images/3.png"></image>
20         <text>收錢</text>
21       </view>
22       <view> 
23         <image src="/images/4.png"></image>
24         <text>卡包</text>
25       </view>
26     </view>
27   </view>
28   <view class="bottom">
29     <view class="one">
30         <view> 
31           <image src="/images/5.png"></image>
32           <text>掃一掃</text>
33         </view>
34         <view> 
35           <image src="/images/6.png"></image>
36           <text>轉賬</text>
37         </view>
38         <view> 
39           <image src="/images/7.png"></image>
40           <text>信用卡還款</text>
41         </view>
42         <view> 
43           <image src="/images/8.png"></image>
44           <text>充值中心</text>
45         </view>
46     </view>
47     <view class="two">
48         <view> 
49           <image src="/images/9.png"></image>
50           <text>余額寶</text>
51         </view>
52         <view> 
53           <image src="/images/10.png"></image>
54           <text>淘票票電影</text>
55         </view>
56         <view> 
57           <image src="/images/11.png"></image>
58           <text>滴滴出行</text>
59         </view>
60         <view> 
61           <image src="/images/12.png"></image>
62           <text>生活繳費</text>
63         </view>
64     </view>
65     <view class="three">
66         <view> 
67             <image src="/images/13.png"></image>
68             <text>芝麻信用</text>
69           </view>
70           <view> 
71             <image src="/images/14.png"></image>
72             <text>火車票機票</text>
73           </view>
74           <view> 
75             <image src="/images/15.png"></image>
76             <text>我去</text>
77           </view>
78           <view> 
79             <image src="/images/16.png"></image>
80             <text>更多</text>
81           </view>
82     </view>
83       
84 
85   </view>
86 
87 </view>

index.wxml

/* pages/lxx/lxx.wxss */ 
.top{
  background-color: #6495ED;
  height: 300rpx;
}
.search-group{
  /* background-color: cyan; */
  height: 60rpx;
  display: flex;
  justify-content: space-evenly;
  /* border-bottom: 1px solid #ff0; */
}
.search-group input{
  background-color: #1a71b7;
  width: 70%;
  height: 100%;
  border-radius: 4px;
  padding-left: 4px;
}
.search-group image{
  width: 60rpx;
  height: 60rpx;
}
.search-group .ph-class{
  color: #ccc;
}





.main-menu{
  display: flex;
  justify-content: space-evenly;
  padding-top: 20rpx;
}
.main-menu view{
  display: flex;
  flex-direction: column;
}
.main-menu text{
  color: #fff;
  text-align: center;
}
.main-menu image{
  width: 140rpx;
  height: 140rpx;
}





.bottom image{
  width: 140rpx;
  height: 140rpx;
}

.bottom .one,.two,.three{
  display: flex;
  justify-content: space-evenly;
  padding-top: 20rpx;
}
.bottom .one view,.bottom .two view,.bottom .three view{
  display: flex;
  flex-direction: column;
}
.bottom .one text,.bottom .two text,.bottom .three text{
  text-align: center;
}

index.wxss

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 小程序WXSS布局小程序Flex布局微信小程序~Flex布局微信小程序 View：flex 布局微信小程序CSS之Flex布局微信小程序之Flex布局微信小程序學習 -flex布局微信小程序flex布局微信小程序開發:Flex布局微信小程序—Flex布局