以下是一个用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布局,柱状图
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“css用Flex布局制作简易柱状图的实现”评论...
更新动态
2024年11月13日
2024年11月13日
- 刘欢《雨中的树(新歌加精选)2CD》德国HD24K金碟[WAV+CUE]
- 郑源 《世间情歌》6N纯银SQCD[WAV+CUE][1G]
- 群星《粤潮2HQII》头版限量编号[低速原抓WAV+CUE][991M]
- 群星《2023好听新歌21》十倍音质 U盘音乐[WAV分轨][1G]
- 《热血传奇》双11感恩回馈 超值狂欢30天
- 原神5.2版本活动汇总 5.2版本活动有哪些
- 张敬轩.2010-NO.ELEVEN【环球】【WAV+CUE】
- 黄丽玲.2006-失恋无罪【艾回】【WAV+CUE】
- 阿达娃.2024-Laluna【W8VES】【FLAC分轨】
- 宝可梦大集结段位等级划分表大全 大集结段位一览
- 龙腾世纪影障守护者工坊与装备如何升级 工坊与装备升级说明
- 龙腾世纪影障守护者全成就攻略分享 龙腾世纪4全成就列表一览
- 《剑星》更新四套全新战衣!
- 卡普空老将伊津野英昭宣布入职腾讯光子 开发3A动作
- 38岁梅根·福克斯官宣怀孕:将迎来第四个孩子