The realization of making simple histogram with flex layout in CSS

Time:2020-5-22

Here is a bar chart with 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 block*/
            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 {/ * block 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 block is 20, and the height of each column is defined in proportion: the first data is 10, the height is 50%; the second data is 8, the height is 40%, and so on.

The block color is recycled in 3 colors.

In layout, the outermost container uses align items: Center; to center the elements in 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 longitudinal, and the direction is from bottom to top flex direction: column reverse;

If you want to make a histogram of vertical arrangement:

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 block*/
            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 {/ * block 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 introduction of this article about the implementation of making simple histogram with flex layout in CSS. For more information about the content of CSS histogram, please search the previous articles of developepaer or continue to browse the following articles. I hope you can support developepaer in the future!