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

發(fā)布時(shí)間：2020-03-17 16:12:03 作者：fenglin247

這篇文章主要介紹了css用Flex布局制作簡易柱狀圖的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

以下是一個(gè)用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%時(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布局制作簡易柱狀圖的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)css柱狀圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！