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

2018/12/28 17:22:06
摘要: 接上次視圖容器組建詳解(一),我們今天繼續來介紹兩個組件樣式。

接上次視圖容器組建詳解(一),我們今天繼續來介紹兩個組件樣式。

1、視圖樣式justify-content: flex-start

效果圖:

 微信小程序定制開發教程

WXML代碼如下:

<view class="flex-wrp flex-start">

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

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

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

</view>

WXSS代碼如下:

.flex-start{

    flex-direction:row;

    justify-content: flex-start;

}

.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: flex-end

 微信小程序定制開發教程

WXML代碼如下:

<view class="flex-wrp flex-end">

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

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

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

</view>

WXSS代碼如下:

.flex-end{

    flex-direction:row;

    justify-content: flex-end;

}

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}


聲明:文章"微信小程序開發技術教程:視圖容器組件詳解(二)"為互誠科技—微信小程序開發公司的原創文章,轉載請注明出處,謝謝合作!
標簽:小程序干貨
電話咨詢:18011971195(黃先生)
在線留言:
微信掃碼,關注我們
相關文章
  • 微信小程序開發工具改版上線,開發變得更容易

    為了滿足開發者在小程序開發各個階段的需求,微信官方在近日上線了全新改版的微信開發者工具,新增了測試系統、騰訊云工具、小程序分階段發布、小程序性能監控

  • 微信小程序商城開發報價問題

    定制開發微信小程序商城,就會面對報價的問題,怎樣的報價才是準確的、符合市場現狀的?這是想要開發小程序商城的商家需要去了解的問題。站在外包開發公司的立場,小編跟大家說說一些與開發報價相關的東西。

  • 小程序開發過程之數據請求封裝與模板的使用

    在開發小程序過程中,需要對數據請求進行封裝,在引入模板的時候,也需要了解模板定義及其引入方法。本文這對這兩個開發

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

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

  • 開發微信小程序分銷商城能否持續發展

    企業選擇開發一種新的產品,首先要考慮的就是它的發展前景,對電子產品的開發也是如此

  • 開發一個購物類小程序需要哪些必備功能

    現在的微信平臺,不僅僅有微信分銷商城、微商城這類電商產品,連最近開發程度火熱的微信小程序也有了相應的商城模式。既然作為電子商城,就必須要有齊全的必備功能來保障其運行。小編就以購物類的小程序為例,來談談開發這么一個小程序需要哪些必備功能。

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