css下flex布局和渐变色

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

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

<div style="display: flex; justify-content: space-between;">
    <div class="" style="display:flex;justify-content:left;">
        <div class="" style="margin-right: 32px; margin-left: 32px;">

            <div style="display: flex; justify-content: flex-end; margin: 2px 0 2px; border: 0 solid gray; border-radius: 0.25rem; padding: 0.5rem 2rem 0.5rem 1rem; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(50,130,246,.8));">
                <div class="">
                    <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_1" /></div>
                    <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_2" /></div>
                    <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_3" /></div>
                    <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_4" /></div>
                </div>
                <div class="">
                    <div class="row-count-title">140001 - Within 1 Month Amount</div>
                    <div class="row-count-title">140001 - Within 2 Month Amount</div>
                    <div class="row-count-title">140001 - Within 3 Month Amount</div>
                    <div class="row-count-title">140001 - Over 3 Month Amount</div>
                </div>
            </div>

        </div>
        <div class="" style="margin-right:32px;">

            <div style="display: flex; justify-content: flex-end; margin: 2px 0 2px; border: 0 solid gray; border-radius: 0.25rem; padding: 0.5rem 2rem 0.5rem 1rem; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(50,130,246,.8));">
                <div class="">
                    <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_1" /></div>
                    <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_2" /></div>
                    <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_3" /></div>
                    <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_4" /></div>
                </div>
                <div class="">
                    <div class="row-count-title">210001 - Within 1 Month Amount</div>
                    <div class="row-count-title">210001 - Within 2 Month Amount</div>
                    <div class="row-count-title">210001 - Within 3 Month Amount</div>
                    <div class="row-count-title">210001 - Over 3 Month Amount</div>
                </div>
            </div>
        </div>
    </div>
    <div style="display:flex;justify-content:right;">
        <div class="" style="margin-right:32px;">

            <div style="display: flex; justify-content: flex-end; margin: 2px 0 2px; border: 0 solid gray; border-radius: 0.25rem; padding: 0.5rem 2rem 0.5rem 1rem; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(139,194,32,1));">
                <div class="">
                    <div class="row-count"><div class="div-icon" style="background-color: #16c2c2;"></div>Payroll Dedcution</div>
                    <div class="row-count"><div class="div-icon" style="background-color: red;"></div>Refund</div>
                    <div class="row-count"><div class="div-icon" style="background-color: darkblue;"></div>In Communication</div>
                    <div class="row-count"><div class="div-icon" style="background-color: yellowgreen;"></div>Not Respond</div>
                </div>
                <div class="">
                    <div class="row-count-right" id="payrollDedcutionCount"></div>
                    <div class="row-count-right" id="refundCount"></div>
                    <div class="row-count-right" id="inCommunicationCount"></div>
                    <div class="row-count-right" id="noReplyCount"></div>
                </div>
            </div>
        </div>
    </div>
</div>

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打开浏览：

<html>
<head>
    <style type="text/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;
        }
    </style>
</head>
<body>
    <div style="display: flex; justify-content: space-between;">
        <div class="" style="display:flex;justify-content:left;">
            <div class="" style="margin-right: 32px; margin-left: 32px;">

                <div style="display: flex; justify-content: flex-end; margin: 2px 0 2px; border: 0 solid gray; border-radius: 0.25rem; padding: 0.5rem 2rem 0.5rem 1rem; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(50,130,246,.8));">
                    <div class="">
                        <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_1" /></div>
                        <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_2" /></div>
                        <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_3" /></div>
                        <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_4" /></div>
                    </div>
                    <div class="">
                        <div class="row-count-title">140001 - Within 1 Month Amount</div>
                        <div class="row-count-title">140001 - Within 2 Month Amount</div>
                        <div class="row-count-title">140001 - Within 3 Month Amount</div>
                        <div class="row-count-title">140001 - Over 3 Month Amount</div>
                    </div>
                </div>

            </div>
            <div class="" style="margin-right:32px;">

                <div style="display: flex; justify-content: flex-end; margin: 2px 0 2px; border: 0 solid gray; border-radius: 0.25rem; padding: 0.5rem 2rem 0.5rem 1rem; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(50,130,246,.8));">
                    <div class="">
                        <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_1" /></div>
                        <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_2" /></div>
                        <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_3" /></div>
                        <div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_4" /></div>
                    </div>
                    <div class="">
                        <div class="row-count-title">210001 - Within 1 Month Amount</div>
                        <div class="row-count-title">210001 - Within 2 Month Amount</div>
                        <div class="row-count-title">210001 - Within 3 Month Amount</div>
                        <div class="row-count-title">210001 - Over 3 Month Amount</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display:flex;justify-content:right;">
            <div class="" style="margin-right:32px;">

                <div style="display: flex; justify-content: flex-end; margin: 2px 0 2px; border: 0 solid gray; border-radius: 0.25rem; padding: 0.5rem 2rem 0.5rem 1rem; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(139,194,32,1));">
                    <div class="">
                        <div class="row-count"><div class="div-icon" style="background-color: #16c2c2;"></div>Payroll Dedcution</div>
                        <div class="row-count"><div class="div-icon" style="background-color: red;"></div>Refund</div>
                        <div class="row-count"><div class="div-icon" style="background-color: darkblue;"></div>In Communication</div>
                        <div class="row-count"><div class="div-icon" style="background-color: yellowgreen;"></div>Not Respond</div>
                    </div>
                    <div class="">
                        <div class="row-count-right" id="payrollDedcutionCount"></div>
                        <div class="row-count-right" id="refundCount"></div>
                        <div class="row-count-right" id="inCommunicationCount"></div>
                        <div class="row-count-right" id="noReplyCount"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

效果图：

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