css用Flex布局制作简易柱状图的实现

<div class="his_box">
    <div>成绩分布直方图</div>
    <div class="histogram">
        <div><div>10</div></div>
        <div><div>8</div></div>
        <div><div>15</div></div>
        <div><div>12</div></div>
        <div><div>5</div></div>
    </div>
</div>

.his_box{ /盒子/
            width: 400px;
            height: 220px;
            border: solid 1px #1E90FF;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .histogram{ /直方图/
            display: flex;
        }
        .histogram>div{ /一条图块/
            width: 30px;
            height: 200px; /100%时的块高度/
            font-size: 14px;
            text-align: center;
            margin-right: 5px;
            display: flex;
            flex-direction: column-reverse;
        }
        .histogram>div:nth-child(3n) div{ /图块颜色/
            background-color: #ff404b;
        }
        .histogram>div:nth-child(3n+1) div{
            background-color: #99CCFF;
        }
        .histogram>div:nth-child(3n+2) div{
            background-color: #F0AD4E;
        }
        .histogram>div:nth-child(1) div{
            flex: 0 0 50%; /20为100%，50%就是10/
        }
        .histogram>div:nth-child(2) div{
            flex: 0 0 40%; /8/20/
        }
        .histogram>div:nth-child(3) div{
            flex: 0 0 75%; /15/20/
        }
        .histogram>div:nth-child(4) div{
            flex: 0 0 60%; /12/20/
        }
        .histogram>div:nth-child(5) div{
            flex: 0 0 25%; /5/20/
        }

.his_box{ /盒子/
            width: 400px;
            height: 220px;
            border: solid 1px #1E90FF;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .his_box>div{
            text-align: center;
        }
        .histogram{ /直方图/
            display: flex;
            flex-direction: column;
        }
        .histogram>div{ /一条图块/
            height: 30px;
            width: 200px; /100%时的块宽度/
            line-height: 30px;
            font-size: 14px;
            text-align: right;
            margin-bottom: 5px;
            display: flex;
        }
        .histogram>div:nth-child(3n) div{ /图块颜色/
            background-color: #ff404b;
        }
        .histogram>div:nth-child(3n+1) div{
            background-color: #99CCFF;
        }
        .histogram>div:nth-child(3n+2) div{
            background-color: #F0AD4E;
        }
        .histogram>div:nth-child(1) div{
            flex: 0 0 50%; /20为100%，50%就是10/
        }
        .histogram>div:nth-child(2) div{
            flex: 0 0 40%; /8/20/
        }
        .histogram>div:nth-child(3) div{
            flex: 0 0 75%; /15/20/
        }
        .histogram>div:nth-child(4) div{
            flex: 0 0 60%; /12/20/
        }
        .histogram>div:nth-child(5) div{
            flex: 0 0 25%; /5/20/
        }