欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序 （八）View組件詳細(xì)介紹

 更新時(shí)間：2016年09月27日 11:37:39   作者：順子_RTFSC  
這篇文章主要介紹了微信小程序 View組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下

剛看到這個(gè)效果的時(shí)候還真是和ReactNative的效果一致，屬性也基本的一樣.

view這個(gè)組件就是一個(gè)視圖組件使用起來非常簡(jiǎn)單。

主要屬性：

flex-direction： 主要兩個(gè)特性”row”橫向排列”column”縱向排列

justify-content 主軸的對(duì)齊方式（如果flex-direction為row則主軸就是水平方向）

可選屬性 (‘flex-start', ‘flex-end', ‘center', ‘space-between', ‘space-around')

align-items 側(cè)軸對(duì)齊方式如果flex-direction為row則側(cè)軸就是垂直方向）

可選屬性 (‘flex-start', ‘flex-end', ‘center'）

wxml

<view class="page">
 <view class="page__hd">
  <text class="page__title">view</text>
  <text class="page__desc">彈性框模型分為彈性容器以及彈性項(xiàng)目。當(dāng)組件的display為flex或inline-flex時(shí)，該組件則為彈性容器，彈性容器的子組件為彈性項(xiàng)目。</text>
 </view>
 <view class="page__bd">
  <view class="section">
   <view class="section__title">flex-direction: row</view>
   <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
   </view>
  </view>
  <view class="section">
   <view class="section__title">flex-direction: column</view>
   <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
   </view>
  </view>
  <view class="section">
   <view class="section__title">justify-content: flex-start</view>
   <view class="flex-wrp" style="flex-direction:row;justify-content: flex-start;">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
   </view>
  </view>
  <view class="section">
   <view class="section__title">justify-content: flex-end</view>
   <view class="flex-wrp" style="flex-direction:row;justify-content: flex-end;">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
   </view>
  </view>
  <view class="section">
   <view class="section__title">justify-content: center</view>
   <view class="flex-wrp" style="flex-direction:row;justify-content: center;">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
   </view>
  </view>
  <view class="section">
   <view class="section__title">justify-content: space-between</view>
   <view class="flex-wrp" style="flex-direction:row;justify-content: space-between;">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
   </view>
  </view>
  <view class="section">
   <view class="section__title">justify-content: space-around</view>
   <view class="flex-wrp" style="flex-direction:row;justify-content: space-around;">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
   </view>
  </view>
  <view class="section">
   <view class="section__title">align-items: flex-end</view>
   <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-end">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
   </view>
  </view>
  <view class="section">
   <view class="section__title">align-items: center</view>
   <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: center">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
   </view>
  </view>

  <view class="section">
   <view class="section__title">align-items: center</view>
   <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-start">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
   </view>
  </view>

 </view>
</view>

wxss

.flex-wrp{
 height: 100px;
 display:flex;
 background-color: #FFFFFF;
}
.flex-item{
 width: 100px;
 height: 100px;
}

相關(guān)文章：

hello WeApp                      icon組件
Window                             text組件                                switch組件
tabBar底部導(dǎo)航                 progress組件                        action-sheet
應(yīng)用生命周期                    button組件                            modal組件
頁(yè)面生命周期                    checkbox組件                       toast組件
模塊化詳                           form組件詳                            loading 組件
數(shù)據(jù)綁定                           input 組件                             navigator 組件
View組件                          picker組件                             audio 組件
scroll-view組件                 radio組件                              video組件
swiper組件                        slider組件                              Image組件

相關(guān)文章

最新評(píng)論