亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

view這個組件就是一個視圖組件使用起來非常簡單。

主要屬性：

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

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

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

align-items 側(cè)軸對齊方式如果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">彈性框模型分為彈性容器以及彈性項目。當(dāng)組件的display為flex或inline-flex時，該組件則為彈性容器，彈性容器的子組件為彈性項目。</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組件
頁面生命周期                    checkbox組件                       toast組件
模塊化詳                           form組件詳                            loading 組件
數(shù)據(jù)綁定                           input 組件                             navigator 組件
View組件                          picker組件                             audio 組件
scroll-view組件                 radio組件                              video組件
swiper組件                        slider組件                              Image組件

相關(guān)文章

  • 一文解析Express框架view對象使用

    一文解析Express框架view對象使用

    這篇文章主要介紹了Express框架view對象使用解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-03-03
  • JS前端錯誤監(jiān)控捕獲以及上報方法詳解

    JS前端錯誤監(jiān)控捕獲以及上報方法詳解

    這篇文章主要為大家介紹了前端錯誤監(jiān)控捕獲以及上報方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-01-01
  • 微信小程序（十）swiper組件詳細(xì)介紹

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

    這篇文章主要介紹了微信小程序swiper組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • JavaScript中使用toLocaleString數(shù)字格式化處理詳解

    JavaScript中使用toLocaleString數(shù)字格式化處理詳解

    這篇文章主要為大家介紹了JavaScript中使用toLocaleString數(shù)字格式化處理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-08-08
  • JavaScript集成公式編輯器示例詳解

    JavaScript集成公式編輯器示例詳解

    這篇文章主要為大家介紹了JavaScript集成公式編輯器示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • quickjs 封裝 JavaScript 沙箱詳情

    quickjs 封裝 JavaScript 沙箱詳情

    這篇文章主要介紹了 quickjs 封裝 JavaScript 沙箱，在前文 JavaScript 沙箱探索 中聲明了沙箱的接口，并且給出了一些簡單的執(zhí)行任意第三方 js 腳本的代碼，但并未實現(xiàn)完整的 IJavaScriptShadowbox，下面便講一下如何基于 quickjs 實現(xiàn),需要的朋友可以參考一下
    2021-10-10
  • 微信小程序 五星評分(包括半顆星評分)實例代碼

    微信小程序 五星評分(包括半顆星評分)實例代碼

    這篇文章主要介紹了微信小程序 五星評分(包括半顆星評分)實例代碼的相關(guān)資料,需要的朋友可以參考下
    2016-12-12
  • 微信小程序 登錄實例詳解

    微信小程序 登錄實例詳解

    這篇文章主要介紹了微信小程序 登錄實例詳解的相關(guān)資料,需要的朋友可以參考下
    2017-01-01
  • JavaScript基本語法講解

    JavaScript基本語法講解

    這篇文章主要介紹了JavaScript的基本語法,包括注釋和書寫格式等基本知識,需要的朋友可以參考下
    2015-06-06
  • JS構(gòu)造函數(shù)和實例化的關(guān)系及原型引入

    JS構(gòu)造函數(shù)和實例化的關(guān)系及原型引入

    這篇文章主要介紹了JS構(gòu)造函數(shù)和實例化的關(guān)系及原型引入，下文圍繞JS構(gòu)造函數(shù)和實例化的關(guān)系及原型引入的西安海關(guān)資料展開全文內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助
    2021-11-11

最新評論