css下flex布局和渐变色

如图想实现左右布局的两个控件区域，带渐变色。

 思路：checkbox一组，字一组，作为一个蓝色控件。蓝色俩控件一组，绿色一组，包含在一个flex布局的div下，space-between布局。

    

        


            

                

                    

                    

                    

                    

                
                

                    
140001 - Within 1 Month Amount
                    
140001 - Within 2 Month Amount
                    
140001 - Within 3 Month Amount
                    
140001 - Over 3 Month Amount
                
            

        
        


            

                

                    

                    

                    

                    

                
                

                    
210001 - Within 1 Month Amount
                    
210001 - Within 2 Month Amount
                    
210001 - Within 3 Month Amount
                    
210001 - Over 3 Month Amount
                
            
        
    
    

        


            

                

                    
Payroll Dedcution
                    
Refund
                    
In Communication
                    
Not Respond
                
                

                    

                    

                    

                    

                
            
        
    

css代码：

.div-icon {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    margin-right: 2px;
}

.row-count {
    display: flex;
    align-items: center;
    width: 160px;
    border: 1px solid transparent;
    /*justify-content: flex-end;*/
    font-size: 13px;
    height: 23.5px;
}

.row-count-title {
    display: flex;
    align-items: center;
    /*width: 160px;*/
    border: 1px solid transparent;
    /*margin-right: 32px;*/
    height: 23.5px;
    line-height: 23.5px;
    font-size: 13px;
}

.row-count-right {
    align-items: center;
    /*width: 60px;*/
    border: 1px solid transparent;
    text-align: right;
    height: 23.5px;
    line-height: 23.5px;
}

放在HTML下的源码可直接保存网页用Chrome打开浏览：

    


    

        

            


                

                    

                        

                        

                        

                        

                    
                    

                        
140001 - Within 1 Month Amount
                        
140001 - Within 2 Month Amount
                        
140001 - Within 3 Month Amount
                        
140001 - Over 3 Month Amount
                    
                

            
            


                

                    

                        

                        

                        

                        

                    
                    

                        
210001 - Within 1 Month Amount
                        
210001 - Within 2 Month Amount
                        
210001 - Within 3 Month Amount
                        
210001 - Over 3 Month Amount
                    
                
            
        
        

            


                

                    

                        
Payroll Dedcution
                        
Refund
                        
In Communication
                        
Not Respond
                    
                    

                        

                        

                        

                        

                    
                
            
        
    

效果图：

 仅供学习参考，如有侵权联系我删除