Detailed introduction of WeChat applet View component

This article mainly introduces the relevant information about the detailed introduction of the View component of the WeChat applet. Friends who need it can refer to it

When I first saw this effect, it was really The effect is consistent with ReactNative, and the properties are basically the same.

view This component is a view component and is very simple to use.

Main attributes:

flex-direction: Main two properties: "row" horizontal arrangement "column" vertical arrangement

justify- content Alignment of the main axis (if flex-direction is row, the main axis is horizontal)

Optional attributes ('flex-start', 'flex-end', 'center', 'space- between', 'space-around')

align-items Cross-axis alignment If flex-direction is row, the cross-axis is the vertical direction)

Optional attributes ('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;
}

For more detailed introduction to the WeChat applet View component and related articles, please pay attention to the PHP Chinese website!