CSS中用Flex布局做柱状图的效果的方法
发布时间:2023-12-17 18:24:28 所属栏目:语言 来源:DaWei
导读: 这篇文章给大家分享的是CSS中用Flex布局做柱状图效果的方法。小编觉得挺实用的,因此分享给大家做个参考,对大家学习和了解Flex布局会有帮助,文中的示例代码介绍得很详细,有需要的朋友
这篇文章给大家分享的是CSS中用Flex布局做柱状图效果的方法。小编觉得挺实用的,因此分享给大家做个参考,对大家学习和了解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中用Flex布局做柱状图效果示例,上述示例具有一定的参考价值,有需要的朋友可以了解看看,希望对大家学习Flex布局有帮助。 (编辑:湘西站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |