欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間:2020-03-17 16:12:03   作者:fenglin247   我要評(píng)論
這篇文章主要介紹了css用Flex布局制作簡(jiǎn)易柱狀圖的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

以下是一個(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)文章

  • 深入淺析CSS3中的Flex布局整理

    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-03
  • css之display屬性之inline-block布局實(shí)現(xiàn)詳解

    今天學(xué)習(xí)css樣式的時(shí)候發(fā)現(xiàn)很多網(wǎng)站都是用css的display:inline-block這個(gè)屬性,這里剛好有篇特別好的解釋,特分享一下
    2020-03-21
  • 詳解CSS中的flex布局

    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

最新評(píng)論