微信小程序把玩（八）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;}