微信小程式 View元件詳細介紹

這篇文章主要介紹了微信小程式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
  弹性框模型分为弹性容器以及弹性项目。当组件的display为flex或inline-flex时，该组件则为弹性容器，弹性容器的子组件为弹性项目。
 
 
  
   flex-direction: row
   
    
    
    
   
  
  
   flex-direction: column
   
    
    
    
   
  
  
   justify-content: flex-start
   
    
    
    
   
  
  
   justify-content: flex-end
   
    
    
    
   
  
  
   justify-content: center
   
    
    
    
   
  
  
   justify-content: space-between
   
    
    
    
   
  
  
   justify-content: space-around
   
    
    
    
   
  
  
   align-items: flex-end
   
    
    
    
   
  
  
   align-items: center
   
    
    
    
   
  

  
   align-items: center
   
    
    
    
   
  

 

################################# #####wxss###############

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

###更多微信小程式View元件詳細介紹相關文章請關注PHP中文網！ ###