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

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應用80%的市場。而事實是否如此,目前我們還是無法去下結論的。但是其帶來

  • 廣州企業開發附近的小程序能帶來什么好處

    附近的小程序是基于微信LBS定位技術支持而開發,現在打開微信首頁“發現-小程序-附近的小程序”,就能發現附近商家的小程序信息

  • 微信小程序技術教程之用戶授權登陸開發

    微信用戶授權登陸的時候,用來記錄用戶身份唯一性的標識就是微信中的unionID,所以在做授權登陸開發的時候,如何拿到

  • 一步教您學會微信小程序的上線發布流程

    小編在找了一資料之后,又根據公司在小程序開發業務上的實際情況,整理了一下小程序調試發布的步驟詳細內容

  • 開發微信小程序時需要注意基本點有哪些

    雖說微信小程序的開發比App開發要簡單得多,但是該注意的東西還是得注意,一些最基本的方面更是要注重,避免一些最基本但具有毀滅性的情況出現。那么,這些所謂的基本注意點有哪些?現在小編可以來分點述說一下。

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