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

网页制作 2025/2/9 佚名

3 2 1

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

HTML：

<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>

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

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

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

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

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

每条柱子也是flex模块，但它的布局方向是纵向的，且方向是从下到上的 flex-direction: column-reverse;

如果想做成纵向排列的直方图：

CSS：

.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*/
        }

css,Flex布局,柱状图

标签：

css,Flex布局,柱状图

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

千金楼资源网 Copyright www.htabc.com

评论“css用Flex布局制作简易柱状图的实现”

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

暂无“css用Flex布局制作简易柱状图的实现”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年02月09日

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

css,Flex布局,柱状图

CSS3实现文字描边的2种方法(小结)

利用css样式实现表格中字体垂直居中的方法

评论“css用Flex布局制作简易柱状图的实现”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接