CSS の Flex レイアウトを使用してシンプルな縦棒グラフを作成する方法

<div class="his_box">
    <div>スコア分布ヒストグラム</div>
    <div class="ヒストグラム">
        <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{ /*ボックス*/
            幅: 400ピクセル;
            高さ: 220px;
            境界線: 実線 1px #1E90FF;
            ディスプレイ: フレックス;
            flex-direction: 列;
            アイテムの位置を中央揃えにします。
        }
        .histogram{ /*ヒストグラム*/
            ディスプレイ: フレックス;
        }
        .histogram>div{ /*タイル*/
            幅: 30ピクセル;
            height: 200px; /*ブロックの高さを100%にする*/
            フォントサイズ: 14px;
            テキスト配置: 中央;
            右マージン: 5px;
            ディスプレイ: フレックス;
            flex-direction: 列反転;
        }
        .histogram>div:nth-child(3n) div{ /*タイルの色*/
            背景色: #ff404b;
        }
        .ヒストグラム>div:n番目の子(3n+1)div{
            背景色: #99CCFF;
        }
        .ヒストグラム>div:n番目の子(3n+2)div{
            背景色: #F0AD4E;
        }
        .ヒストグラム>div:n番目の子(1)div{
            flex: 0 0 50%; /*20は100%、50%は10*/
        }
        .ヒストグラム>div:n番目の子(2)div{
            フレックス: 0 0 40%; /*8/20*/
        }
        .ヒストグラム>div:n番目の子(3)div{
            フレックス: 0 0 75%; /*15/20*/
        }
        .ヒストグラム>div:n番目の子(4)div{
            フレックス: 0 0 60%; /*12/20*/
        }
        .ヒストグラム>div:n番目の子(5)div{
            フレックス: 0 0 25%; /*5/20*/
        }

.his_box{ /*ボックス*/
            幅: 400ピクセル;
            高さ: 220px;
            境界線: 実線 1px #1E90FF;
            ディスプレイ: フレックス;
            flex-direction: 列;
            コンテンツの両端揃え: スペースの間;
        }
        .his_box>div{
            テキスト配置: 中央;
        }
        .histogram{ /*ヒストグラム*/
            ディスプレイ: フレックス;
            flex-direction: 列;
        }
        .histogram>div{ /*タイル*/
            高さ: 30px;
            width: 200px; /*ブロック幅100%*/
            行の高さ: 30px;
            フォントサイズ: 14px;
            テキスト配置: 右;
            下部マージン: 5px;
            ディスプレイ: フレックス;
        }
        .histogram>div:nth-child(3n) div{ /*タイルの色*/
            背景色: #ff404b;
        }
        .ヒストグラム>div:n番目の子(3n+1)div{
            背景色: #99CCFF;
        }
        .ヒストグラム>div:n番目の子(3n+2)div{
            背景色: #F0AD4E;
        }
        .ヒストグラム>div:n番目の子(1)div{
            flex: 0 0 50%; /*20は100%、50%は10*/
        }
        .ヒストグラム>div:n番目の子(2)div{
            フレックス: 0 0 40%; /*8/20*/
        }
        .ヒストグラム>div:n番目の子(3)div{
            フレックス: 0 0 75%; /*15/20*/
        }
        .ヒストグラム>div:n番目の子(4)div{
            フレックス: 0 0 60%; /*12/20*/
        }
        .ヒストグラム>div:n番目の子(5)div{
            フレックス: 0 0 25%; /*5/20*/
        }