How to create a simple column chart using Flex layout in css

The following is a bar chart using Flex layout:

HTML:

<div class="his_box">
    <div>Score distribution histogram</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>

CSS:

.his_box{ /*box*/
            width: 400px;
            height: 220px;
            border: solid 1px #1E90FF;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .histogram{ /*histogram*/
            display: flex;
        }
        .histogram>div{ /*a tile*/
            width: 30px;
            height: 200px; /*Block height at 100%*/
            font-size: 14px;
            text-align: center;
            margin-right: 5px;
            display: flex;
            flex-direction: column-reverse;
        }
        .histogram>div:nth-child(3n) div{ /*tile color*/
            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 is 100%, 50% is 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*/
        }

In this example, the highest point of the tile is 20, and the height of each column is defined proportionally: the first data is 10, and the height is 50%; the second data is 8, and the height is 40%, and so on.

The tile colors are cycled through 3 colors.

During layout, the outermost container uses align-items: center; to center the elements within the container as a whole.

The histogram module uses display: flex; to arrange the columns in the module horizontally.

Each column is also a flex module, but its layout direction is vertical, and the direction is from bottom to top flex-direction: column-reverse;

If you want to make a vertically arranged histogram:

CSS:

.his_box{ /*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{ /*histogram*/
            display: flex;
            flex-direction: column;
        }
        .histogram>div{ /*a tile*/
            height: 30px;
            width: 200px; /*Block width at 100%*/
            line-height: 30px;
            font-size: 14px;
            text-align: right;
            margin-bottom: 5px;
            display: flex;
        }
        .histogram>div:nth-child(3n) div{ /*tile color*/
            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 is 100%, 50% is 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*/
        }

This is the end of this article about how to use CSS to create a simple bar chart with Flex layout. For more relevant CSS bar chart content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: 2 methods and precautions for adding scripts in HTML

>>: How to modify the scroll bar style in Vue