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

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(黃先生)
在線留言:
微信掃碼,關注我們
相關文章
  • 閃開發票+自助打印小程序解決方案加快報銷進程

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

  • 微信小程序開發之新功能開放預告

    據某不知名群眾報道,騰訊微信又開始內測一項新功能,雖然這樣的消息流出套路已經不止一次,

  • 微信小程序開發技術教程之Mustache語法要點總結

    開發人員在做小程序開發的時候,會在wxml里,用到Mustache語法。而Mustache其實就是一個logic-less(輕邏輯)模板解析引擎

  • 借力微信小程序開發,為傳統行業拓展流量來源

    自從電商行業出現以來,傳統行業就一直被改革。不過也正是因為電商行業所帶來的沖擊,才讓傳統行業不得不去反思自己的發展模式,尋求新的商業模式結合發展。而微信小程序的出現,就被很多傳統行業從業人士所看好,因為它的服務場景更廣,能發展

  • 微信小程序開發的熱門類目有哪些

    微信小程序的開發類目在不斷被放開,開發熱度也呈上升趨勢,越來越多的用戶企業商家將目光看向小程序,去開發、去發展這個平臺。不過小程序

  • 微信小程序最終會不會取代公眾號?

    微信小程序自出現以來就很多人在預言,說由于小程序跟公眾號沒什么不同,但使用比公眾號更加方便,所以最終可能就會取代公眾號。這個說法到底對不對呢,有沒有可能呢,是不是會成真呢?小編認為還是不太可能的,兩者雖然有相似的地方,但是也有不同

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