CSS中如何用Flex部署做柱状图的效果？

发布时间：2022-04-11 16:58:00 所属栏目：语言来源：互联网

导读：这篇文章给大家分享的是CSS中用Flex布局做柱状图效果的方法。小编觉得挺实用的，因此分享给大家做个参考，对大家学习和了解Flex布局会有帮助，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。以下是一个用Flex布局的

这篇文章给大家分享的是CSS中用Flex布局做柱状图效果的方法。小编觉得挺实用的，因此分享给大家做个参考，对大家学习和了解Flex布局会有帮助，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

    以下是一个用Flex布局的柱状图：

    CSS：

.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;
        }

        }
    本例中，图块的最高点为20，每条柱子的高度按比例定义：第1条数据为10，高度是50%；第2条数据为8，高度为40%，以此类推。

    图块颜色采用3色循环使用。

    布局时，最外层容器使用了align-items: center;使容器内元素整体居中。

    直方图模块使用了display: flex;让模块中的柱子横向排列。

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

C++ search_n 函数用法	GDB print和display命
行逻辑链接的顺序表压	回看算法详解