微信小程序 （八）View組件詳細介紹
剛看到這個效果的時候還真是和ReactNative的效果一致，屬性也基本的一樣.
view這個組件就是一個視圖組件使用起來非常簡單。
主要屬性：
flex-direction： 主要兩個特性”row”橫向排列”column”縱向排列
justify-content 主軸的對齊方式（如果flex-direction為row則主軸就是水平方向）
可選屬性 (‘flex-start', ‘flex-end', ‘center', ‘space-between', ‘space-around')
align-items 側軸對齊方式如果flex-direction為row則側軸就是垂直方向）
可選屬性 (‘flex-start', ‘flex-end', ‘center'）
wxml
<view class="page">
<view class="page__hd">
<text class="page__title">view</text>
<text class="page__desc">彈性框模型分為彈性容器以及彈性項目。當組件的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;
}
相關文章：
hello WeApp icon組件
Window text組件 switch組件
tabBar底部導航 progress組件 action-sheet
應用生命周期 button組件 modal組件
頁面生命周期 checkbox組件 toast組件
模塊化詳 form組件詳 loading 組件
數(shù)據(jù)綁定 input 組件 navigator 組件
View組件 picker組件 audio 組件
scroll-view組件 radio組件 video組件
swiper組件 slider組件 Image組件
相關文章
微信小程序組件 contact-button（客服會話按鈕）詳解及實例代碼
這篇文章主要介紹了微信小程序組件 contact-button（客服會話按鈕）詳解及實例代碼的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 條件渲染的相關資料,并附簡單實例代碼，需要的朋友可以參考下2016-10-10
在網頁中控制wmplayer播放器...2006-07-07
顏色選擇: ColorMatch 5K...2006-12-12
JavaScript parseInt0.0000005打印5原理解析
這篇文章主要為大家介紹了JavaScript parseInt0.0000005打印5原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 支付簡單實例的相關資料,這里參考官方文檔寫的簡單實例，并提出注意事項，需要的朋友可以參考下2017-01-01
超級強大的表單驗證...2006-06-06
這篇文章主要為大家介紹了JavaScript實現(xiàn)一鍵復制內容，document.execCommand原生JS設置剪貼板的實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序左右滑動切換頁面詳解及實例代碼的相關資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了學習筆記vue的第一個程序，其中非常詳細的為大家講解了vue程序的創(chuàng)建步驟，有需要的朋友可以學習下，希望可以有所幫助2021-08-08