css用Flex布局制作簡(jiǎn)易柱狀圖的實(shí)現(xiàn)

以下是一個(gè)用Flex布局的柱狀圖:
HTML:
<div class="his_box"> <div>成績(jī)分布直方圖</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%時(shí)的塊高度*/ 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*/ }
本例中,圖塊的最高點(diǎn)為20,每條柱子的高度按比例定義:第1條數(shù)據(jù)為10,高度是50%;第2條數(shù)據(jù)為8,高度為40%,以此類推。
圖塊顏色采用3色循環(huán)使用。
布局時(shí),最外層容器使用了align-items: center;使容器內(nèi)元素整體居中。
直方圖模塊使用了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%時(shí)的塊寬度*/ 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*/ }
到此這篇關(guān)于css用Flex布局制作簡(jiǎn)易柱狀圖的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)css柱狀圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- Flexbox布局模塊旨在提供一個(gè)更有效的方式,在一個(gè)容器里面去布局分配空間。這篇文章給大家介紹CSS3中的Flex布局,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或2020-04-27
CSS實(shí)現(xiàn)動(dòng)態(tài)圖片的九宮格布局的實(shí)例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)動(dòng)態(tài)圖片的九宮格布局的實(shí)例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-03css之display屬性之inline-block布局實(shí)現(xiàn)詳解
今天學(xué)習(xí)css樣式的時(shí)候發(fā)現(xiàn)很多網(wǎng)站都是用css的display:inline-block這個(gè)屬性,這里剛好有篇特別好的解釋,特分享一下2020-03-21- flex布局又稱為彈性布局,任何一個(gè)容器都可以指定為flex布局,這篇文章主要介紹了CSS中的flex布局,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參2020-03-19
使用CSS和Java來(lái)構(gòu)建管理儀表盤布局的實(shí)例代碼
這篇文章主要介紹了使用CSS和Java來(lái)構(gòu)建管理儀表盤布局的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考2020-06-24