微信小程序:flex布局实现换行

1、关键代码.wxml:


    
       请选择充值金额

      
        
          
            
              
                
                  
                
                80
              
              ¥ 80.00
            
          
        

        
          
            
              
                
                  
                
                80
              
              ¥ 80.00
            
          
        

        
          
            
              
                
                  
                
                80
              
              ¥ 80.00
            
          
        

        
          
            
              
                
                  
                
                80
              
              ¥ 80.00
            
          
        

        
          
            
              
                
                  
                
                80
              
              ¥ 80.00
            
          
        

        
          
            
              
                
              
            
          
        

      
    
  

2、关键代码.wxss:

/* 实现换行 */
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.pay .pay-item {
  width: 220rpx;
  height: 140rpx;
  background: #F9F9F9;
  border-radius: 20rpx;
  border: 2rpx solid #E9E9E9;
  margin-top: 20rpx;
}

.pay .pay-item-select{
  width: 220rpx;
  height: 140rpx;
  border:3rpx solid #FF5000;
  border-radius: 20rpx;
  background: #FFF6EE;
  margin-top: 20rpx;
}

.pay .pay-item-detail .pay-input{
  background-color: #F9F9F9;
}

效果: 

微信小程序:flex布局实现换行_第1张图片

你可能感兴趣的:(三方开发,微信小程序,小程序)