微信小程序開發技術教程:視圖容器組件詳解(三)

2018/12/29 17:21:15
摘要: 接上次視圖容器組建詳解(一)與(二),我們今天把最后兩個組件樣式

接上次視圖容器組建詳解(一)與(二),我們今天把最后兩個組件樣式說明一下,順便貼出一些相關的屬性內容。

1、視圖樣式justify-content: center

效果圖:

 微信小程序開發技術教程

WXML代碼如下:

<view class="flex-wrp justify-content-center">

    <view style="background: red"></view>

    <view style="background: green"></view>

    <view style="background: blue"></view>

</view>

WXSS代碼如下:

.justify-content-center{

    flex-direction:row;

    justify-content: center;

}

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}

2、視圖樣式justify-content: space-between

效果圖:

 微信小程序開發技術教程

WXML代碼如下:

<view class="flex-wrp space-between">

  <view style="background: red"></view>

  <view style="background: green"></view>

  <view style="background: blue"></view>

</view>

WXSS代碼如下:

.space-between{

  flex-direction:row;

  justify-content: space-between;

}

.flex-wrp{

  height: 100px;

  display:flex;

  background-color: #FFFFFF;

}

.flex-item{

  width: 100px;

  height: 100px;

}

.red{

  background: red;

}

.green{

  background: green;

}

.blue{

  background: blue;

}

主要的屬性:

排列方式(flex-direction),用于wxss要屬性:

屬性

描述

row

橫向排列

column

縱向排列

 

彈性項目內容對其(justify-content),用于wxss

屬性

描述

flex-start

彈性項目向行頭緊挨著填充

flex-end

彈性項目向行尾緊挨著填充

center

彈性項目居中緊挨著填充

space-between

彈性項目平均分布在該行上

space-around

彈性項目平均分布在該行上,兩邊留一半的間隔空間

 

項目在容器內側軸方位的對齊方式(align-items),用于wxss

屬性

描述

stretch

默認值,彈性項目被拉伸以適應容器

center

彈性項目位于容器中心

flex-start

彈性項目位于容器開頭

flex-end

彈性項目位于容器結尾

baseline

彈性項目位于容器基線上

 

聲明:文章"微信小程序開發技術教程:視圖容器組件詳解(三)"為互誠科技—微信小程序開發公司的原創文章,轉載請注明出處,謝謝合作!
標簽:小程序干貨
電話咨詢:18011971195(黃先生)
在線留言:
微信掃碼,關注我們
相關文章
  • 關于降低微信小程序定制開發成本的兩點建議

    雖然說微信小程序定制開發的價格比APP開發低了很多倍,但是一些不必要的費用還是需要去避免的,特別是對于微信小程序定制開發成本把控比較嚴格的一些企業商家來說,更加需要去降低開發成本,把錢花在刀刃上。對此,小編有幾點關于

  • 小程序入口總結:哪些入口效率比較高

    微信小程序從一開始的沒有固定入口到現在已經發展成為多個入口結合一起發展的形式。不過,有很多入口,當然就會存在流量大的入口與流量較小的入口,企業商家掌握這些入口的大概效率,就能去較好地選擇宣傳方式與陣地

  • 影響廣州微信小程序定制開發費用的因素

    在目前的廣州微信圈市場上,不會存在每一個定制開發的小程序費用都一樣的情況,不同的功能需求、不同的開發主體以及市場環境都有可能成為影響開發價格的因素。

  • 微信小程序開發教程之index 頁面解析

    微信小程序的每一個頁面都包含三個文件,分別是.js(處理邏輯),.wxml(描述頁面內容),.wxss(配置頁面樣式),index 頁面同樣

  • 閃開發票+自助打印小程序解決方案加快報銷進程

    前一陣子微信官方開放的閃開發票的功能,一經推出就受到廣大用戶的支持與使用,不過這個功能也只是支持在開發的時候,可以直接將自己之前在“微信發票助手”中的開票信息傳輸給開票工作人員而已,并不是整個開票流程都是全自助化

  • 定制化微信小程序為何價格會高那么多

    無論是定制版本的微信小程序還是公眾號、微商城,價格都會比模板制作的高出一些。那為什么會高?又高在哪里?這兩個問題的回答就能讓企業商家看出定制開發是否值得,所以小編得摩拳擦掌來好好夸大其詞了。

上海快三走势图上海快3形态走势